2

//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;

enter image description here

**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. **

Arya Singh
  • 86
  • 11
  • Link's to attribute should have `"/article/some_name"` I guess. Also, you should use `useParams` to get the URL parameters. – kiner_shah Dec 31 '21 at 09:50
  • That's a fairly different thing here 'name' refer to variable. As far as i learnt variable is passed like that! – Arya Singh Dec 31 '21 at 09:53
  • I meant Link in your Navbar not the Route. Like this ` Article ` – kiner_shah Dec 31 '21 at 09: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 Dec 31 '21 at 09:58
  • Then you should probably add a separate route for that. – kiner_shah Dec 31 '21 at 10:00
  • I can do it that that would be quiet static .I wanted to make it dynamic. – Arya Singh Dec 31 '21 at 10:02
  • Does this answer your question? [React Router with optional path parameter](https://stackoverflow.com/questions/35604617/react-router-with-optional-path-parameter) – kiner_shah Dec 31 '21 at 10:06
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/240601/discussion-between-arya-singh-and-kiner-shah). – Arya Singh Dec 31 '21 at 10:16

1 Answers1

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;
Mayur Vaghasiya
  • 1,383
  • 2
  • 12
  • 24