React Router is the de-facto library for client-side routing in React applications, allowing you to manage navigation and display different UI components based on the URL without full page reloads. At its core, you wrap your application with BrowserRouter and define your various routes using Routes and Route components. Each Route maps a specific path to an element (your React component). This enables a seamless user experience, mimicking traditional multi-page websites but with the performance benefits of a Single Page Application (SPA).
As applications grow, pages often have subsections that depend on the parent route. This is where nested routes come in. Instead of defining entirely separate routes for related content, you can declare child routes within a parent Route. The parent component then renders its UI, and within it, provides an <Outlet /> component. This <Outlet /> acts as a placeholder where the matched child route's component will render. For example, a /dashboard route might render a DashboardLayout component, and a nested /dashboard/settings route would render a Settings component inside the DashboardLayout's <Outlet />, allowing for shared layouts and contextual navigation.
Often, you need routes that display specific data based on an identifier in the URL, like /products/123 or /users/john-doe. This is handled by URL parameters. You define a parameter in your route path using a colon, e.g., /products/:productId. When the URL matches, productId becomes a dynamic segment. Inside the component rendered by this route, you can easily access these parameters using the useParams hook provided by React Router. This is fundamental for fetching and displaying details for a specific item, enabling dynamic content without having to create a unique route for every single item in your database.
Key Takeaways
- React Router is the standard for client-side navigation in React, preventing full page reloads.
- Nested routes enable hierarchical UI structures, rendering child components within a parent's
<Outlet />. - URL parameters (
/:param) allow for dynamic routes, fetching specific data viauseParams. - These features are essential for building scalable and intuitive Single Page Applications (SPAs).
Code Example
How this code works
This code demonstrates how to set up nested routes and use URL parameters with React Router. Its job is to manage different views in an application, displaying a home page, a general products page with a list, and specific product detail pages where the product's unique ID is part of the URL. The BrowserRouter component wraps the entire application to enable routing, and inside, Routes holds all the individual Route definitions. A Route with path="/products" uses ProductsLayout as its main component. This ProductsLayout acts as a parent, consistently showing "Product Section" while its Outlet component renders the content of nested child routes.
The nested routes inside /products handle specific product views. The index Route is a subtle but important detail: it tells React Router to display "Product List" when the URL is exactly /products, providing a default view for the product section. Immediately after, a Route with path=":productId" demonstrates a URL parameter. The colon (:) signifies that productId is a dynamic part of the URL, like /products/123. The ProductDetail component then uses the useParams hook to easily extract this productId value from the current URL, allowing it to show details for that specific product ID.