Categories
React Answers

How to get parameter value from query string with React Router?

Spread the love

Sometimes, we want to get parameter value from query string with React Router.

In this article, we’ll look at how to get parameter value from query string with React Router.

How to get parameter value from query string with React Router?

To get parameter value from query string with React Router, we can use the useLocation hook.

For instance, we write

import React from "react";
import { useLocation } from "react-router-dom";

const MyComponent = () => {
  const { search } = useLocation();
  const id = new URLSearchParams(search).get("id");
  console.log(id);
  //...
};

to use the useLocation hook to get the URL data.

And then we get the query string from the search property.

Next, we pass in search to URLSearchParams.

And we get the value of the id query parameter with get.

Conclusion

To get parameter value from query string with React Router, we can use the useLocation hook.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *