Get the current route using React Router

Get the current route using React Router #

Use the useLocation() hook to get the current route with React Router, e.g. const location = useLocation(). The hook returns the current location object. For example, you can access the pathname as location.pathname.

App.js

Copied!
import React from 'react';
import {Route, Link, Routes, useLocation} from 'react-router-dom';

export default function App() {
  const location = useLocation();

  console.log('hash', location.hash);
  console.log('pathname', location.pathname);
  console.log('search', location.search);

  return (
    <div>
      <div>
        <h2>Current Pathname 👉️ {location.pathname}</h2>
        <h2>Current Search params 👉️ {location.search}</h2>
        <h2>Current Hash 👉️ {location.hash}</h2>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users?page=10">Users</Link>
            </li>
            <li>
              <Link to="/users?page=10#myHash">Users with hash</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/about" element={<About />} />
          <Route path="/" element={<Home />} />
        </Routes>
      </div>
    </div>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

react router get current route

We used the useLocation hook to get the current location object.

Some of the properties you can access on the location object are:

pathname - the current pathname, e.g. /users
search - the current query string, e.g. ?page=10
hash - the current hash, e.g. #example.

If you need to get the full URL, e.g. https://google.com, use window.location.href instead.

When using react router hooks, make sure to wrap your application in a Router component in your index.js file.

index.js

Copied!
import {createRoot} from 'react-dom/client';
import App from './App';
import {BrowserRouter as Router} from 'react-router-dom';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

// 👇️ wrap App in Router
root.render(
  <Router>
    <App />
  </Router>
);

The best place to wrap your React app with a Router component is in your index.js file because that's the entry point of your React application.

Once your entire app is wrapped with a Router component, you can use any of the hooks from the react router package anywhere in your components.

If you have a dynamic route and are trying to access its ID, use the useParams hook.

App.js

Copied!
import React from 'react';
import {Route, Link, Routes, useParams} from 'react-router-dom';

function Users() {
  // 👇️ get ID from url
  const params = useParams();

  console.log(params); // 👉️ {userId: '12345'}

  return <h2>userId is 👉️ {params.userId}</h2>;
}

export default function App() {
  return (
    <div>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              {/* 👇️ link to dynamic path */}
              <Link to="/users/12345">Users</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/about" element={<About />} />
          {/* 👇️ handle dynamic path */}
          <Route path="/users/:userId" element={<Users />} />
          <Route path="/" element={<Home />} />
        </Routes>
      </div>
    </div>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

get dynamic route id

The useParams hook returns an object of key-value pairs of the dynamic params from the current URL that were matched by the <Route path>.

Notice that we set a dynamic path prop on the Route component that renders the Users component - <Route path="/users/:userId" element={<Users />} />.

When the visitor navigates to /users/some-id, we can use the useParams hook to get the ID.

App.js

Copied!
function Users() {
  // 👇️ get ID from url
  const params = useParams();

  console.log(params); // 👉️ {userId: '12345'}

  return <h2>userId is 👉️ {params.userId}</h2>;
}

The route would match anything after /users/, e.g. /users/123 or /users/asdf.

Get the current route using React Router

Get the current route using React Router #

Borislav Hadzhiev