Tutorials › React Modern Development › React Router

React Router

6 min read Quiz at the end

React Router v6 maps URLs to components. Wrap with <BrowserRouter>, define <Routes> with <Route path='/' element={<Home />} />, navigate with <Link to='/about'>, and read URL params with useParams().

React Router v6

npm install react-router-dom

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

function App() {
  return (
    
      
        Home
        About
      
      
        } />
        } />
        } />
      
    
  );
}

function User() {
  const { id } = useParams();
  return User {id};
}

← Forms in React Next: Fetching Data →

Topic Quiz · 5 questions

Test your understanding before moving on

1. Which component wraps the whole app for routing?

💡 BrowserRouter provides the routing context to all nested Route components.

2. Which component defines a route?

💡 <Route path="/url" element={<Component />} /> maps a URL to a component.

3. Which hook reads URL parameters?

💡 useParams() returns an object of key/value pairs from the URL parameters.

4. Which component renders a link?

💡 <Link to="/path"> renders an accessible anchor that enables client-side navigation.

5. What does <Navigate /> do?

💡 <Navigate to="/path" /> programmatically redirects the user.

Quick Access

React Router

React Router v6

Test your understanding before moving on