How to route to a path with parameters in React.js

Question

I'm trying to make a news-feed website with React.js.

How to make a Router with the news ID? I'm trying something like this:

<Route path="/news/:id">
   { ( {id} ) => <NewsPiece newsID={id}/> }
</Route>

But it didn't work out. I tried to look it up but didn't find any way convenience.

Below is my App.js being the main file.

import React from 'react';
import NavBar from './components/NavBar'
import Container from './components/Container'
import NewsPiece from './components/NewsPiece'
import Topics from './components/Topics'
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";

function App() {
  return (
    <React.Fragment>
      <NavBar/>
      <Router>
        <Switch>

          <Route path="/news/:id">
            { ( {id} ) => <NewsPiece newsID={id}/> }
          </Route>

          <Route path="/news">
            <Topics/>
          </Route>

          <Route path="/">
            <Container/>
          </Route>

        </Switch>
      </Router>
    </React.Fragment>
  );
}

export default App;

Rishav Pandey · Accepted Answer · 2021-05-29 14:12:17Z

3

You should simply create a route like this -

App.js -

...
<Switch>
 <Route path="/news/:id">
  <NewsPiece />
 </Route>
<Switch>
...

Now go to your component and access route parameter like this.

components/NewsPiece(assuming it's functional component) -

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

function NewPiece = () => {
....
const { id } = useParams(); // you'll get the id present in URL route parameter
....
}

export default NewPiece;

Explanation - react-router-dom provides a hook useParams which extracts all the route parameters present and gives us in an object with key-value pair.

Since you're already getting id from a route parameter you don't need to use extra props newsID for this.

answered May 29, 2021 at 14:12

Rishav Pandey

6921 gold badge7 silver badges20 bronze badges

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

Comments

brown · Accepted Answer · 2021-05-29 14:07:20Z

0

Try this

import React from 'react';
import NavBar from './components/NavBar'
import Container from './components/Container'
import NewsPiece from './components/NewsPiece'
import Topics from './components/Topics'
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";

function App() {
  return (
    <React.Fragment>
      <NavBar/>
      <Router>
        <Switch>

          <Route path="/news/:id">
            <NewsPiece newsID={id}/> 
          </Route>

          <Route path="/news">
            <Topics/>
          </Route>

          <Route path="/">
            <Container/>
          </Route>

        </Switch>
      </Router>
    </React.Fragment>
  );
}

export default App;

If the error still happens comment the error msg

answered May 29, 2021 at 14:07

brown

331 silver badge8 bronze badges

2 Comments

Rahadian Panji Over a year ago

it still gives an error of id is not defined

brown Over a year ago

You havent specified the id ,refer it as a function outside the routing component it will work

Prayag Choraria · Accepted Answer · 2021-05-29 14:17:41Z

0

That's not the correct way to get the route params.

Your route should just be like this.

<Route path="/news/:id">
    <NewsPiece/> 
</Route>

You will get the value of your param inside the NewsPiece component using props.match.params.id

Here id is the param name you are using.

edited May 29, 2021 at 14:17

answered May 29, 2021 at 14:02

Prayag Choraria

8196 silver badges15 bronze badges

2 Comments

Rahadian Panji Over a year ago

It still gives an error of id is not defined

Prayag Choraria Over a year ago

What's the url you are hitting? Does it have the id in it?

brown · Accepted Answer · 2021-05-29 14:25:42Z

Try this then

import React from 'react';
import NavBar from './components/NavBar'
import Container from './components/Container'
import NewsPiece from './components/NewsPiece'
import Topics from './components/Topics'
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";

function App() {
  return (
    <React.Fragment>
      <NavBar/>
      <Router>
        <Switch>

          <Route 
            path="/news/:id"
            component = {NewsPiece newsID={id}} 
          </Route>

          <Route path="/news">
            <Topics/>
          </Route>

          <Route path="/">
            <Container/>
          </Route>

        </Switch>
      </Router>
    </React.Fragment>
  );
}

export default App;

If the error still continues . Its a problem with your importing method...

Collectives™ on Stack Overflow

How to route to a path with parameters in React.js

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related