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

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.

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

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 class="App">
        <h3>Multiple parameters - <a href="https://www.cluemediator.com">Clue Mediator</a></h3>
        <ul>
          <li>
            <link to="/">Home
          </li>
          <li>
            <link to="/demo">Without Params (Path: /demo)
          </li>
        </ul>
        <switch>
          <route exact="" path="/" component={Home}>
          <route path="/demo" component={Demo}>
        </route></route></switch>
      </div>
    </browserrouter>
  );
}

export default App;

Home.js

import React from 'react';

function Home() {
  return (
    <h4>Home page!</h4>
  )
}

export default Home;

Demo.js

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.

<route path="/demo/:p1?/:p2?" component={Demo}>
</route>

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

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 class="App">
        <h3>Multiple parameters - <a href="https://www.cluemediator.com">Clue Mediator</a></h3>
        <ul>
          <li>
            <link to="/">Home
          </li>
          <li>
            <link to="/demo">Without Params (Path: /demo)
          </li>
          <li>
            <link to="/demo/s1">Single Parameter (Path: /demo/s1)
          </li>
          <li>
            <link to="/demo/s1/m2">Multiple Parameters (Path: /demo/s1/m2)
          </li>
        </ul>
        <switch>
          <route exact="" path="/" component={Home}>
          <route path="/demo/:p1?/:p2?" component={Demo}>
        </route></route></switch>
      </div>
    </browserrouter>
  );
}

export default App;

Demo.js

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.

Output - Multiple parameters with React Router - Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

Github Repository StackBlitz Project