I'm trying to render the params in the url as an h2 in in the website. But even when I try console.log useParams is empty.

Here's my Router.js file

const Webpages = () => {
    return (
        <Router>
            <Routes>
                <Route exact path="/" element={Home()} />
                <Route exact path="/ics" element={Comics()} />
                <Route path='/ics/:icId' element={Comic()} />  <--------------
                <Route exact path="/portfolio" element={Portfolio()} />
                <Route exact path="/blog" element={Blog()} />
                <Route exact path="/contact" element={Contact()} />
                <Route exact path="/store" element={Store()} />
                <Route path="*" element={NotFound()} />
            </Routes>
        </Router>
    );
};

export default Webpages;

Here's my ic ponent

import React from 'react';
import NavBar from '../../ponents/NavBar';
import { useParams } from 'react-router-dom';

function Comic() {
    let { icId } = useParams();
    console.log(icId);

    return (
        <div>
            <NavBar />
            <p>{icId}</p>
        </div>
    )
}

export default Comic

The page element when I go to a random ic works fine, like localhost:3000/ics/465456 but the

tag is empty and the console log is undefined, it's also undefined if I just try to console log useParams()

I'm trying to render the params in the url as an h2 in in the website. But even when I try console.log useParams is empty.

Here's my Router.js file

const Webpages = () => {
    return (
        <Router>
            <Routes>
                <Route exact path="/" element={Home()} />
                <Route exact path="/ics" element={Comics()} />
                <Route path='/ics/:icId' element={Comic()} />  <--------------
                <Route exact path="/portfolio" element={Portfolio()} />
                <Route exact path="/blog" element={Blog()} />
                <Route exact path="/contact" element={Contact()} />
                <Route exact path="/store" element={Store()} />
                <Route path="*" element={NotFound()} />
            </Routes>
        </Router>
    );
};

export default Webpages;

Here's my ic ponent

import React from 'react';
import NavBar from '../../ponents/NavBar';
import { useParams } from 'react-router-dom';

function Comic() {
    let { icId } = useParams();
    console.log(icId);

    return (
        <div>
            <NavBar />
            <p>{icId}</p>
        </div>
    )
}

export default Comic

The page element when I go to a random ic works fine, like localhost:3000/ics/465456 but the

tag is empty and the console log is undefined, it's also undefined if I just try to console log useParams()

• javascript
• reactjs
• react-router
• react-router-dom

Share Improve this question Follow edited Aug 21, 2022 at 5:39 Drew Reese 204k1818 gold badges245245 silver badges273273 bronze badges asked Aug 21, 2022 at 5:24 Tom HuginTom Hugin 8311 silver badge88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You are directly invoking the React function. Directly invoking React functions is not how React works.

The Route ponent's element prop expects a React.ReactNode, a.k.a. JSX. Pass the ponents as JSX. The JSX is transpiled down to vanilla Javascript and the React framework handles calling your function within the confines of the React ponent lifecycle.

Example:

const Webpages = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/ics" element={<Comics />} />
        <Route path='/ics/:icId' element={<Comic />} />
        <Route path="/portfolio" element={<Portfolio />} />
        <Route path="/blog" element={<Blog />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/store" element={<Store />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
};