Multiple parameters with React Router
Today we will show you how to pass multiple parameters with React Router. In the previous article, we have explained how to implement URL parameters in React Router. But there we have passed a single parameter by URL. We will use the same concept here to pass multiple parameters in the URL.
Sometimes you might need to pass two different parameters in the URL via react router and they could be optional. Therefore you can follow the below steps to pass multi params using react-router.
The complete guide of Routing in ReactJS
- Routing in React JS
- URL Parameters with React Router
- Nested Routes in React JS
- Multiple parameters with React Router (You are here…)
- What’s new in React Router version 6
Steps to pass multiple parameters
1. Create a react application
To begin the implementation, we will create a simple react application using create-react-app
. Run the following command to create a react app.
1 | npx create-react-app multi-params-react-router |
You will find the step by step explanation to create a react application.
2. Implement react routing
To implement react routing, we need to install react-router-dom
in the project as a routing dependency.
If you don’t know how to implement routing in react then check out this article: Routing in React JS.
Here we have taken two additional components to manage the redirection. After implementing the routing, your file should look like this.
App.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 | import React from 'react'; import { BrowserRouter, Switch, Route, Link } from 'react-router-dom'; import Home from './Home'; import Demo from './Demo'; function App() { return ( <BrowserRouter> <div className="App"> <h3>Multiple parameters - <a href="https://www.cluemediator.com">Clue Mediator</a></h3> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/demo">Without Params</Link> (Path: /demo) </li> </ul> <Switch> <Route exact path="/" component={Home} /> <Route path="/demo" component={Demo} /> </Switch> </div> </BrowserRouter> ); } export default App; |
Home.js
1 2 3 4 5 6 7 8 9 | import React from 'react'; function Home() { return ( <h4>Home page!</h4> ) } export default Home; |
Demo.js
1 2 3 4 5 6 7 8 9 | import React from 'react'; function Demo() { return ( <h4>Demo page!</h4> ) } export default Demo; |
3. Pass multi params with react-router
Hope you already know how to pass a single parameter with react router. The same logic we will use to pass multiple parameters.
The following command will be used for it.
1 | <Route path="/demo/:p1?/:p2?" component={Demo} /> |
Here we have considered both parameters as optional. Let’s use it in App.js
component and handle the value in Demo.js
component.
App.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 | import React from 'react'; import { BrowserRouter, Switch, Route, Link } from 'react-router-dom'; import Home from './Home'; import Demo from './Demo'; function App() { return ( <BrowserRouter> <div className="App"> <h3>Multiple parameters - <a href="https://www.cluemediator.com">Clue Mediator</a></h3> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/demo">Without Params</Link> (Path: /demo) </li> <li> <Link to="/demo/s1">Single Parameter</Link> (Path: /demo/s1) </li> <li> <Link to="/demo/s1/m2">Multiple Parameters</Link> (Path: /demo/s1/m2) </li> </ul> <Switch> <Route exact path="/" component={Home} /> <Route path="/demo/:p1?/:p2?" component={Demo} /> </Switch> </div> </BrowserRouter> ); } export default App; |
Demo.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | import React from 'react'; function Demo(props) { const { params } = props.match; return ( <div> <h4>Demo page!</h4> <div><b>Parameter 1: </b>{params.p1}</div> <div><b>Parameter 2: </b>{params.p2}</div> </div> ) } export default Demo; |
4. Output
Run the project and check the output in the browser.
That’s it for today.
Thank you for reading. Happy Coding..!!