React Router
Dashboard
Topic 7/10
Home › React › React Router

🗺️ React Router

React Router v6, BrowserRouter, Routes/Route, Link/NavLink, useParams, and protected routes.

Configuring React Router v6

Wrap your app in `` and define routes using `` and ``.

App.jsx JSX 
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

export function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/users/:id" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

Reading Dynamic Route Parameters

Use the `useParams` hook to access parameters passed via URL.

UserProfile.jsx JSX 
import { useParams } from 'react-router-dom';

export function UserProfile() {
  const { id } = useParams();
  return <h2>Viewing Profile for User ID: {id}</h2>;
}