How to Create Dynamic Routes in React with React Router

To create dynamic routes in React, use React Router and define routes with URL parameters using : syntax like /user/:id. Access these parameters inside components with the useParams() hook to render content based on the URL.

Syntax

Dynamic routes use URL parameters marked by a colon : in the route path. The useParams() hook retrieves these parameters inside the component.

• Route path: Defines the dynamic segment with : (e.g., /profile/:userId).
• useParams: Hook to get the current URL parameters as an object.

jsx

import { BrowserRouter, Routes, Route, useParams } from 'react-router-dom';

function UserProfile() {
  const params = useParams();
  return <h1>User ID: {params.userId}</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/profile/:userId" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

Example

This example shows a React app with a dynamic route /profile/:userId. When you visit /profile/123, it displays "User ID: 123". The useParams() hook extracts the userId from the URL.

jsx

import React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Routes, Route, useParams, Link } from 'react-router-dom';

function UserProfile() {
  const { userId } = useParams();
  return <h1>User ID: {userId}</h1>;
}

function Home() {
  return (
    <div>
      <h2>Home</h2>
      <ul>
        <li><Link to="/profile/101">Profile 101</Link></li>
        <li><Link to="/profile/202">Profile 202</Link></li>
      </ul>
    </div>
  );
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/profile/:userId" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

Output

When visiting /profile/101, the page shows: User ID: 101
When visiting /profile/202, the page shows: User ID: 202
The home page shows links to these profiles.

Common Pitfalls

• Forgetting to wrap your app in BrowserRouter causes routing to fail.
• Not using useParams() inside the component to access dynamic parts.
• Using path without the colon : for dynamic segments results in static routes.
• Trying to access params outside route components or hooks will not work.

jsx

/* Wrong: Missing colon for dynamic segment */
<Route path="/profile/userId" element={<UserProfile />} />

/* Right: Use colon to mark dynamic segment */
<Route path="/profile/:userId" element={<UserProfile />} />

Quick Reference

Use this quick guide to create dynamic routes:

Concept	Usage	Notes
Dynamic Route Path	/item/:id	Defines a route with a dynamic segment named 'id'.
Access Params	const { id } = useParams();	Get the dynamic value inside the component.
Router Wrapper	<BrowserRouter>...</BrowserRouter>	Wrap your app to enable routing.
Route Setup	<Route path="/item/:id" element={...} />	Use element prop for component rendering.
Link to Dynamic	<Link to={`/item/${id}`} />	Navigate to dynamic routes with Link.

Key Takeaways

Use React Router's : syntax in path to define dynamic routes.

Access dynamic URL parts inside components with the useParams() hook.

Always wrap your app with BrowserRouter to enable routing.

Ensure dynamic segments have a colon prefix; otherwise, routes are static.

Use Link components to navigate to dynamic routes cleanly.