CODEWITHSUNDEEP
javascriptreactjs
Rahadian Panji
Rahadian Panji

Reputation: 113

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

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;

Upvotes: 0

Views: 4133

Answers (4)

brown
brown

Reputation: 33

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

Upvotes: 0

Prayag Choraria
Prayag Choraria

Reputation: 819

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.

Upvotes: 0

Rishav Pandey
Rishav Pandey

Reputation: 692

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.

Upvotes: 3

brown
brown

Reputation: 33

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

Upvotes: 0

Related Questions