React Router Basics
React Router is the standard routing library for React. It enables navigation among views of various components in a React application, allows changing the browser URL, and keeps the UI in sync with the URL.
Installation
npm install react-router-dom
The Router Components
BrowserRouter
BrowserRouter is the recommended router for all React Web projects. It uses the HTML5 History API to keep your UI in sync with the URL.
import { BrowserRouter } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
{/* The rest of your app goes here */}
</BrowserRouter>
);
}
Routes and Route
The Routes component looks through all its Route children to find the best match and renders that branch of the UI.
import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Dashboard from './Dashboard';
function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/dashboard" element={<Dashboard />} />
</Routes>
);
}
Navigation: Link and NavLink
Linkallows you to navigate to another route without triggering a full page reload.NavLinkis a special kind ofLinkthat knows whether or not it is "active", which is useful for styling navigation menus.
import { Link, NavLink } from 'react-router-dom';
function Navigation() {
return (
<nav>
{/* Standard Link */}
<Link to="/">Home</Link>
{/* NavLink with active styling */}
<NavLink
to="/about"
style={({ isActive }) => {
return {
fontWeight: isActive ? "bold" : "",
color: isActive ? "red" : "black",
};
}}
>
About
</NavLink>
</nav>
);
}
URL Parameters and Hooks
You can define dynamic routes using a colon :. The useParams hook allows you to access these parameters.
import { Route, Routes, useParams } from 'react-router-dom';
function UserProfile() {
let { userId } = useParams();
return <h1>Profile for User: {userId}</h1>;
}
function App() {
return (
<Routes>
<Route path="/users/:userId" element={<UserProfile />} />
</Routes>
);
}
React Router v6 Features
React Router v6 introduced several new patterns, including an object-based routing configuration using createBrowserRouter and RouterProvider.
import {
createBrowserRouter,
RouterProvider,
} from "react-router-dom";
const router = createBrowserRouter([
{
path: "/",
element: <Home />,
errorElement: <ErrorPage />,
},
{
path: "/about",
element: <About />,
},
]);
function App() {
return <RouterProvider router={router} />;
}
Nested Routes
Routes can be nested to create complex layouts. The Outlet component is used within parent route elements to render their child route elements.
import { Routes, Route, Outlet } from 'react-router-dom';
function Dashboard() {
return (
<div>
<h1>Dashboard</h1>
<nav>
<Link to="stats">Stats</Link>
<Link to="settings">Settings</Link>
</nav>
{/* Child routes render here */}
<Outlet />
</div>
);
}
function App() {
return (
<Routes>
<Route path="/dashboard" element={<Dashboard />}>
<Route path="stats" element={<Stats />} />
<Route path="settings" element={<Settings />} />
</Route>
</Routes>
);
}
Mastering React Router is essential for building Single Page Applications (SPAs) that offer a seamless, app-like navigation experience.