How to Use URL Parameters and Query Strings With React Router

Get your users where they’re going

Photo by Matt Duncan on Unsplash

React is a library for creating front-end views. It has a big ecosystem of libraries that work with it. Also, we can use it to enhance existing apps.

To build single-page apps, we have to have some way to map URLs to the React component to display.

In this article, we’ll look at how to access URL parameters in React Router routes.

Define Routes That Accept URL Parameters, and Get Them

To define a Route with a path that takes an id as a parameter, we can put a colon before the parameter name.

For example, we can write:

<Switch>
    <Route path="/:id" children={<User />} />
</Switch>

Then we can use the useParams Hook to get the URL parameter.

We can write a full example as follows:

In the code above, we have the Switch component in App with the Route inside as…