React Router enables client-side routing, view transitions, and nested route layouts for React single-page applications.
Basic Route Setup (React Router v6+)
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
);
}
Links & Navigation
import { Link, NavLink, useNavigate } from 'react-router-dom';
function Navigation() {
const navigate = useNavigate();
return (
<nav>
{/* Basic Link */}
<Link to="/about">About</Link>
{/* NavLink with automatic active styling */}
<NavLink
to="/dashboard"
className={({ isActive }) => (isActive ? 'active-link' : 'link')}
>
Dashboard
</NavLink>
{/* Programmatic navigation */}
<button onClick={() => navigate('/login')}>Log In</button>
<button onClick={() => navigate(-1)}>Go Back</button>
</nav>
);
}
URL Parameters & Query Strings
import { useParams, useSearchParams } from 'react-router-dom';
// Route defined as: <Route path="/users/:id" element={<UserProfile />} />
function UserProfile() {
const { id } = useParams();
const [searchParams, setSearchParams] = useSearchParams();
const tab = searchParams.get('tab') || 'overview';
return (
<div>
<h2>User Profile ID: {id}</h2>
<p>Active Tab: {tab}</p>
</div>
);
}
Nested Layouts (Outlet)
import { Outlet } from 'react-router-dom';
function DashboardLayout() {
return (
<div className="layout">
<aside className="sidebar">Sidebar Links</aside>
<main className="content">
<Outlet /> {/* Renders child route element */}
</main>
</div>
);
}
// In route configuration:
<Route path="/dashboard" element={<DashboardLayout />}>
<Route index element={<DashboardOverview />} />
<Route path="analytics" element={<Analytics />} />
<Route path="settings" element={<Settings />} />
</Route>