Oct 01, 2022

Get the ID from a URL in React and React Router #

Use the useParams() hook to get the ID from a URL in React, e.g. const params = useParams(). 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.

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: '4200'}

  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/4200">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>;
}

The useParams hook returns an object of key-value pairs of the dynamic params from the current URL that were matched by the . Notice that we set a dynamic path prop on the Route component that renders the Users component - } />. We can use the useParams hook to get the ID when the visitor navigates to /users/some-id,

https://bobbyhadz.com/blog/react-router-get-id-from-url

Get the ID from a URL in React and React Router #

Grepper

Documentation

Social

Legal

Contact