URL parameter with React-Router

Question

//ArticlePage

const ArticlePage = ({ match }) => {
    const name = match.params.name;
    return (
    <>
        <h1>
            This is {name} Article
        </h1>
    </>
);
    }
export default ArticlePage;

//App

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import NavBar from "./NavBar";
import NotFound from "./pages/NotFound";
import ArticlePage from "./pages/ArticlePage";

function App () {
  return (
    <div className="App">
      <BrowserRouter>
        <NavBar />
        <Routes> 
          <Route exact path='/' element ={<HomePage />} />
          <Route path = '/topic' element = {<Topic />} />
          <Route path = '/about' element = {<AboutPage />} />
          <Route path = '/article/:name' element = {<ArticlePage />} /> 
          <Route path = '*' element = {<NotFound />} />
        </Routes>
      </BrowserRouter>
    </div>
   );
}

export default App;

//NavBar Page

import { Link } from 'react-router-dom';
import './NavBar.css';

const NavBar = () => (
    <nav>
        <ul>
            <li className='li'>
                <Link to ="/" className='link' > Home </Link>
            </li>
            <li className='li'>
                <Link to ="/about" className='link' > About </Link>
            </li>
            <li className='li'>
                <Link to = "/article" className='link'> Article </Link>
            </li>
            <li className='li'>
                <Link to = "/topic" className='link' > Topic </Link> 
            </li>
        </ul>
    </nav>
);

export default NavBar;

**I am trying to pass URL parameter using variable 'name' but soon as i access ArticlePage I get 404:Not Found (content of my NotFound Page) .I'm trying to get value of 'name' variable using props (match) in ArticlePage but I'm unable to render it. Fairly new to React, any hint or solution would be appreciated. I'm using React v6. **

Link's to attribute should have "/article/some_name" I guess. Also, you should use useParams to get the URL parameters. — kiner_shah
– kiner_shah, Commented Dec 31, 2021 at 9:50
That's a fairly different thing here 'name' refer to variable. As far as i learnt variable is passed like that! — Arya Singh
– Arya Singh, Commented Dec 31, 2021 at 9:53
I meant Link in your Navbar not the Route. Like this <Link to = "/article/some_name" className='link'> Article </Link> — kiner_shah
– kiner_shah, Commented Dec 31, 2021 at 9:53
That doesn't even make sense article here link to one of my Article Page. I have issue with URL parameter. If someone type '/article' he should refer to my article main-page but if someone type '/article/learn-react' then i want to refer him to that page using URL parameter. — Arya Singh
– Arya Singh, Commented Dec 31, 2021 at 9:58

Mayur Vaghasiya · Accepted Answer · 2021-12-31 10:32:29Z

2

Try this code it's works

import { useParams } from 'react-router-dom';

const ArticlePage = () => {
   const params = useParams();
  return (
    <>
      <h1>
        This is {params.name} Article
      </h1>
    </>
  );
}
export default ArticlePage;

edited Dec 31, 2021 at 10:32

answered Dec 31, 2021 at 10:28

Mayur Vaghasiya

1,4812 gold badges18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Arya Singh Over a year ago

Is it necessary to pass match as parameter while using useParams.

Mayur Vaghasiya Over a year ago

No need pass match in parameter ! i update my answer

Arya Singh Over a year ago

Can you refer any article about usage of match and useParams beacuse I'm bit confused though it solves my problem.

Mayur Vaghasiya Over a year ago

For more help medium.com/geekculture/…

Collectives™ on Stack Overflow

URL parameter with React-Router

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related