Sometimes, we want to add multiple parameters with React Router.

In this article, we’ll look at how to add multiple parameters with React Router.

How to add multiple parameters with React Router?

To add multiple parameters with React Router, we can get the URL parameters from the useParams hook.

For instance, we add

<Route path="/:category/:id" exact component={ItemDetails} />;

to add the category and id parameters to the Route.

Then we can get it from ItemDetails with

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

export default function ItemDetails(props) {
  const { id, category } = useParams();
  return (
    <div>
      {id}
      {category}
    </div>
  );
}

We call useParams to return an object with the id and category parameters.

Conclusion

To add multiple parameters with React Router, we can get the URL parameters from the useParams hook.