Get the ID from a URL in React and React Router

avatar

Borislav Hadzhiev

Fri Apr 29 20222 min read

banner

Photo by Rod Long

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.

App.js
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 <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
function Users() { // 👇️ get ID from url const params = useParams(); console.log(params); // 👉️ {userId: '4200'} return <h2>userId is 👉️ {params.userId}</h2>; }

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

Make sure to wrap your React application in a Router component in your index.js file before using the useParams hook.

index.js
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.

Use the search field on my Home Page to filter through my more than 1,000 articles.