How to Pass Parameters with React Router

If you're building a single-page application with React, chances are that you're using React Router to handle your app's routing. React Router is a powerful library that allows you to create dynamic routes for your app. One of the most common use cases for React Router is passing parameters to a component.

Passing parameters with React Router is a simple process, but it can be tricky for beginners. In this tutorial, we'll walk you through the steps of passing parameters with React Router, and we'll show you some examples to help you get started.

What are parameters in React Router?

In React Router, parameters are values that are passed to a component through the URL. Parameters are used to make dynamic routes that can be used for a variety of purposes, such as filtering content, displaying user information, or even creating a shopping cart.

Parameters are defined in the route path, and they are represented by a colon followed by the parameter name. For example, if we want to pass a parameter called id to a component, we would define it in the route path like this: /users/:id.

Step-by-step guide to passing parameters with React Router

Here's a step-by-step guide to passing parameters with React Router:

Step 1: Install React Router

If you haven't already done so, the first step is to install React Router. You can do this using npm or yarn:

npm install react-router-dom

yarn add react-router-dom

Step 2: Set up your routes

Next, you'll need to set up your routes. This involves creating a Router component and defining your routes using the Route component.

Here's an example of how you might set up your routes:

import { BrowserRouter as Router, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <Route exact path="/" component={Home} />
      <Route path="/users/:id" component={User} />
      <Route path="/about" component={About} />
    </Router>
  );
}

In this example, we've defined three routes:

• The first route, exact path="/", matches the root URL of the app and renders the Home component.
• The second route, path="/users/:id", matches any URL that starts with /users/ followed by a parameter called id, and renders the User component.
• The third route, path="/about", matches the URL /about and renders the About component.

Step 3: Access the parameters in your component

Once you've defined your routes, you can access the parameters in your component using the useParams hook. This hook returns an object that contains all of the parameters defined in the route path.

Here's an example of how you might use the useParams hook to access a parameter called id in your User component:

import { useParams } from "react-router-dom";

function User() {
  let { id } = useParams();

  return <h2>User ID: {id}</h2>;
}

In this example, we've imported the useParams hook from React Router, and we've called it in our User component. We then use object destructuring to extract the id parameter from the params object that useParams returns. Finally, we render the id parameter in an h2 tag.

Step 4: Link to your parameterized routes

To link to your parameterized routes, you can use the Link component from React Router. The Link component is a special component that allows you to create links that navigate to different URLs in your app without having to reload the entire page.

Here's an example of how you might use the Link component to link to a parameterized route:

import { Link } from "react-router-dom";

function UsersList() {
  const users = [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" },
    { id: 3, name: "Charlie" },
  ];

  return (
    <div>
      <h2>Users List</h2>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            <Link to={`/users/${user.id}`}>{user.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

In this example, we've defined a UsersList component that renders a list of users. We've used the Link component to create a link for each user that navigates to the user's profile page. The to prop of the Link component specifies the URL for the link, including the id parameter.

Conclusion

Passing parameters with React Router is a powerful feature that allows you to create dynamic routes for your app. By defining parameters in your route path and using the useParams hook, you can access and use the parameters in your components. And by using the Link component, you can create links that navigate to your parameterized routes.

In this tutorial, we've shown you how to pass parameters with React Router step-by-step, and we've provided some examples to help you get started. With this knowledge, you should be able to create dynamic routes for your app and take advantage of all that React Router has to offer.