How to get current route in React

In React, you can use the useLocation hook provided by the react-router-dom library to get information about the current route.

UseLocation hook

Here’s an example of how to use the useLocation hook to get the current route:

import { useLocation } from 'react-router-dom';

function MyComponent() {
  const location = useLocation();

  return (
    <div>
      <p>Current route: {location.pathname}</p>
      <p>Current search query: {location.search}</p>
      <p>Current hash: {location.hash}</p>
    </div>
  );
}

Key Takeaways

• To get the current route in React, you can use the useLocation hook provided by the react-router-dom library.
• The useLocation hook returns an object with information about the current location, including the current route path, search query, and hash.
• You can use this object to access the current route information within any component in your React application.

FAQ

What is the useLocation hook?

The useLocation hook is a React hook that is provided by the react-router-dom library. It returns an object with information about the current location.

What is the current location?

The current location is the URL of the current page in the browser. It includes the route path, search query, and hash.

How do I use the useLocation hook?

To use the useLocation hook, you need to import it from the react-router-dom library and call it within the component where you want to get the current location information.