React Router
The routing standard for React single-page applications.
What it is
React Router is a standard library for routing in React applications. It enables navigation among views, allows changing the browser URL, and keeps the UI in sync with the URL.
React Router uses components like `<BrowserRouter>`, `<Routes>`, `<Route>`, and `<Link>` to define routes and navigation. It supports dynamic route parameters, nested routes, redirects, and route guards.
- Licence
- MIT
- Watch for
- The v6 and v7 data APIs differ substantially from v5 tutorials
When to use it
The question documentation cannot answer for you — because it cannot recommend something else.
Reach for it when
- Any React SPA that needs more than one screen
- You need nested layouts, route-level data loading or protected routes
Look elsewhere when
- You are on Next.js or Remix, which provide their own routing
Installation
npm install react-router-domGetting started
The smallest useful thing you can do with it, and what each part means.
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
function Home() { return <h1>Home</h1>; }
function About() { return <h1>About</h1>; }
function App() {
return (
<Router>
<nav>
<Link to='/'>Home</Link>
<Link to='/about'>About</Link>
</nav>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/about' element={<About />} />
</Routes>
</Router>
);
}import { useParams } from 'react-router-dom';
function User() {
const { id } = useParams();
return <h1>User ID: {id}</h1>;
}
<Routes>
<Route path='/user/:id' element={<User />} />
</Routes>Advanced usage
Where the library earns its place over a simpler alternative.
function Dashboard() { return (
<div>
<h1>Dashboard</h1>
<Routes>
<Route path='stats' element={<Stats />} />
<Route path='settings' element={<Settings />} />
</Routes>
</div>
); }import { Navigate } from 'react-router-dom';
<Route path='/old' element={<Navigate to='/new' replace />} />function PrivateRoute({ children }) {
const isAuthenticated = false; // replace with auth logic
return isAuthenticated ? children : <Navigate to='/login' />;
}
<Routes>
<Route path='/dashboard' element={<PrivateRoute><Dashboard /></PrivateRoute>} />
</Routes>Errors and fixes
The failures you are most likely to hit, and what actually resolves them.
- 404 Page Not Found
- Use a wildcard route (`*`) at the end of `<Routes>` to render a 404 component.
- Incorrect route path
- Ensure the path in `<Route>` matches the URL exactly, considering trailing slashes.
- Navigation not updating
- Wrap your app in `<BrowserRouter>` and use `<Link>` or `useNavigate` for navigation instead of `<a>` tags.
Best practices
- Use `<BrowserRouter>` at the root of your app for client-side routing.
- Keep route paths consistent and semantic for better readability and SEO.
- Use `useParams`, `useLocation`, and `useNavigate` hooks for dynamic route handling.
- Prefer nested routes for hierarchical UI structures.
- Use `Navigate` for redirects and route guards.
Alternatives
Comparable options, and the reason you would pick one over the other.
TanStack Router
Fully type-safe routing, including params and search — worth evaluating for TypeScript projects
Background
Why it exists, and what it was reacting to.
React Router was created by Ryan Florence and Michael Jackson in 2014 to solve the problem of handling navigation in single-page React applications. It provides declarative routing components, nested routes, and dynamic route matching, making it easier to manage application state and navigation.