CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-dom
Tom Hugin
Tom Hugin

Reputation: 83

useParams() is empty in react-router

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="/comics" element={Comics()} />
                <Route path='/comics/:comicId' 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 comic component

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

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

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

export default Comic

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

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

Upvotes: 5

Views: 8680

Answers (1)

Drew Reese
Drew Reese

Reputation: 203408

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

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

Example:

const Webpages = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/comics" element={<Comics />} />
        <Route path='/comics/:comicId' 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>
  );
};

Upvotes: 4

Related Questions