How to Use URL Parameters and Query Strings With React Router

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

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 a child. The path prop is set to /:id , which means that we can use the useParams Hook later to get the route parameter.

Then in the children prop, we pass in the User component, which we want to display.

Also, we added Link components with the links that we can click to go to the URL with the given URL parameters in the to prop.

Then in the User component, we get the id from the URL parameter with the useParams Hook.

Finally, we display the id in the User route.

Get and Set Query Strings

We can define and use a useQuery Hook in a component to get query parameters. To pass in query parameters, we just add them to the Links to props as usual.

For example, we can write the following:

We first defined the useQuery Hook to get the query parameters of the URL via the URLSearchParams constructor. We get the useLocation()s search property.

Then we create a QueryScreen component to call useQuery() and get the URLSearchParams instance assigned to query. This is where we can use query to get the name query parameter by calling get with 'name' passed in.

Then we pass in the value returned by query.get(“name” ) to the User component as a prop and display it there.

Conclusion

We can use the useParams Hook to get a URL parameter defined in Routes.

We can accept URL parameters in a Route by putting a colon before the parameter name in the path parameter, like path=”/:id”.

To add query strings in a path, we just append it directly to the path.

Then we can convert the query string into a URLSearchParams instance, and we can use the search property of that to get the query string.

We can then use the get method with the key name to get the value.