React Router v6 has made it possible to pass props to the components normally. Earlier, in the older version of react-router, we need to use Route’s render method to pass props to the component.

In this tutorial, we will be using React Router v6, so make sure you’re using the same version.

Let’s get started.

Project setup

Get started by creating react app on your machine or open your browser and visit react.new

A new CodeSandbox environment will open with React project setup.

Next, Install react-router v6 in the React app.

$ npm install react-router-dom@6

Creating a simple Route with react-router

Here’s how we normally create a route:

// App.js
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import About from "./Components/About";

function App() {
  return (
    <div>
      <p>Hello, world!</p>
      <Router>
        <Routes>
          <Route path="/about" element={<About />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

// ./Components/About.js
import React from "react";

const About = () => {
  return <div>About</div>;
};

export default About;

In the above code, we have simply created the /about route with the help of the Route component which renders the About component. With the help of Route, we can map URL paths to React Components.

When you run the React app and navigate to /about you will see the About component being rendered on http://localhost:3000/about.

Passing params

Params are placeholders in the URL that begin with a colon, like the :id. The :id param defined in the route in the example below is an example of a parameter, which are placeholders in the URL that start with a colon.

In the code below, we have simply created Links that take us to different routes and changed the path of our About component to the :id param.

// App.js
import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import "./App.css";
import About from "./Components/About";

function App() {
  return (
    <div>
      <p>Hello, world!</p>
      <Router>
        <h2>Languages</h2>

        <ul>
          <li>
            <Link to="/english">English</Link>
          </li>
          <li>
            <Link to="/spanish">Spanish</Link>
          </li>
          <li>
            <Link to="/french">French</Link>
          </li>
          <li>
            <Link to="/german">German</Link>
          </li>
        </ul>

        <Routes>
          <Route exact path="/:id" element={<About />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

In the About component, We can access the dynamic parts of the URL by using the useParams hook. The useParams hook provides an object of the dynamic parameters from the current URL that matched the specified route. All the parameters are inherited by child routes from their parent routes. Here, we are accessing the :id param defined in the route we created earlier.

// ./Components/About.js
import React from "react";
import { useParams } from "react-router";

const About = () => {
  let { id } = useParams();
  return (
    <div>
      <div>
        <h2>ID: {id}</h2>
      </div>
    </div>
  );
};

export default About;

Run the React App and you will see the links displayed. As you click on any of the links, it will take you to that route, and then the :id param in the URL will be displayed as shown below.

That’s it for this tutorial, I hope you understood how we can pass params to components in react-router.

Thank you so much for reading.

Feel free to comment if you have any questions or suggestions. If you want to request any article for a particular topic contact us through the about page. We would love to hear from you.

👋 Hey, I'm Pratham Bhagat

I simplify complex web development topics. My curiosity leads me to learn about various technologies, and my love for writing helps me to impart my knowledge for the same.