URL Parameters with React Router
Today we will show you how to set URL parameters with React Router. Major use of URL parameters routing is to render the same component based on its dynamic url.
We are going to continue with the previous example. So refer the previous article Routing in React JS.
The complete guide of Routing in ReactJS
- Routing in React JS
- URL Parameters with React Router (You are here…)
- Nested Routes in React JS
- Multiple parameters with React Router
- What’s new in React Router version 6
Key points for URL Parameters with React Router
- Why we need URL Parameters
- Add route for Not Found page
- Implement URL Parameters with Example
- Output
1. Why we need URL Parameters
As I mentioned previously, To render the same react component based on given dynamic URL like If you have a list of users and you want to display the user details by Id (www.xyz.com/user/1, www.xyz.com/user/2, etc) then URL Parameters is used.
2. Add route for Not Found page
Before we jump on URL Parameters, I want to let you know how to set Not Found page via react router. For that can you please refer previous article. I am going to continue with it.
We need to create Not Found component to load when URL will not match with listed routes.
Notfound.js
1 2 3 4 5 6 7 8 9 10 11 12 | import React, { Component } from 'react'; class Notfound extends Component { render() { return <div> <h2 style={{ marginBottom: 0 }}>404</h2> <h4 style={{ marginTop: 0 }}>Page Not Found!</h4> </div> } } export default Notfound; |
We will add this component route at the end of all of the listed routes. Now this is how your updated index.js file looks.
index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import { BrowserRouter, Switch, Route, Link } from 'react-router-dom' import App from './App'; import About from './About'; import Contact from './Contact'; import Notfound from './Notfound'; const routing = ( <BrowserRouter> <div> <h3>Clue Mediator</h3> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/about/1">About 1</Link> </li> <li> <Link to="/about/2">About 2</Link> </li> <li> <Link to="/contact">Contact</Link> </li> </ul> <Switch> <Route exact path="/" component={App} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> <Route component={Notfound} /> </Switch> </div> </BrowserRouter> ) ReactDOM.render(routing, document.getElementById('root')); |
Let’s check it by manually entering wrong path like http://localhost:3000/abc.
3. Implement URL Parameters with Example
Now simply we need to update index.js file to handle the URL params. Following command will be used for that.
1 | <Route path="/about/:id" component={About} /> |
Use below command if you want to set parameter as optional. (For React Router v4 and above)
1 | <Route path="/about/:id?" component={About} /> |
For React Router v1, v2 and v3
1 | <Route path="/about(/:id)" component={About} /> |
index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import { BrowserRouter, Switch, Route, Link } from 'react-router-dom' import App from './App'; import About from './About'; import Contact from './Contact'; import Notfound from './Notfound'; const routing = ( <BrowserRouter> <div> <h3>Clue Mediator</h3> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/about/1">About 1</Link> </li> <li> <Link to="/about/2">About 2</Link> </li> <li> <Link to="/contact">Contact</Link> </li> </ul> <Switch> <Route exact path="/" component={App} /> <Route path="/about/:id?" component={About} /> <Route path="/contact" component={Contact} /> <Route component={Notfound} /> </Switch> </div> </BrowserRouter> ) ReactDOM.render(routing, document.getElementById('root')); |
Use below command to get the url parameters
1 | const { params } = this.props.match; |
So your About.js file will look like the following
About.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | import React, { Component } from 'react'; class About extends Component { render() { const { params } = this.props.match; return <div> <h4>About</h4> <p>This is About page.</p> {params.id ? <b>ID: {params.id}</b> : <i>ID is optional.</i>} </div> } } export default About; |
4. Output
I followed this to a T and get this error:
Uncaught TypeError: Cannot destructure property ‘params’ of ‘this.props.match’ as it is undefined.
I don’t think the routing props are found in your component. You have to wrap your component with
withRouteror pass the routing props from the parent component.Please watch the attached video in the article for more information.
I am using Laravel with reactjs, and I have to define react routes in laravel route and react app.js. How to use optional parameter which calls same componenet
Hi Shinde,
We have explained the optional parameter in the third point. You can also check the video for more understanding.