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

Steps to pass multiple parameters

  1. Create a react application
  2. Implement react routing
  3. Pass multi params with react-router
  4. Output

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.

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

Home.js

Demo.js

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.

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

Demo.js

4. Output

Run the project and check the output in the browser.

Output - Multiple parameters with React Router - Clue Mediator
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

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *