The Use of useLocation and useSearchParams

The react-router provides many useful hooks to optimize our platform, including useLocation and useSearchParams, which can save us a lot of development time. This lesson covers the use case and implementation of these hooks.

What is useLocation?

Query strings are used to encode data in a URL. The query string consists of key-value pairs, also known as search parameters.

The useLocation hook provides the current location object. To use the useLocation hook, we need to import useLocation where it’s needed and create an object that represents the current URL by calling useLocation().

• Import: import { useLocation } from "react-router-dom";

• Usage: const location = useLocation();

This returns a location object as shown below if the URL is in the following form: http://www.example.com/search/1.