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.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Get the current route using React Router

Get the current route using React Router #

Borislav Hadzhiev