React Routing

Modern web applications are expected to be fast, responsive, and feel like native software. A key component of this experience is client-side routing, which allows users to navigate between different views or pages within an app without the browser performing a full page reload. This is what React Router provides. It's the de facto standard library for managing navigation and URL state in React applications, enabling you to build single-page applications (SPAs) that are both dynamic and bookmarkable.

Core Concept: The Router and Basic Navigation

At its heart, React Router is a component-based routing library. You don't configure routes in a separate file or server; you declare them directly within your React component tree. The entire system is wrapped in a Router component (like BrowserRouter), which provides the context for all routing operations to its child components.

Navigation between routes is primarily achieved with two components: <Link> and <Route>. A <Link> renders an accessible anchor (<a>) tag. When clicked, it updates the browser's URL without a full page reload, allowing React Router to intercept the request and render the appropriate component. The <Route> component is the declarative mapping between a URL path and the component that should be displayed. In its simplest form, you define a path and the component to render when the current URL matches that path.

<BrowserRouter>
  <nav>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
  </nav>
  <Routes>
    <Route path="/" element={<HomePage />} />
    <Route path="/about" element={<AboutPage />} />
  </Routes>
</BrowserRouter>

Routing Syntax and Structure in v6

React Router v6 introduced significant, simplifying changes. The most notable is the replacement of the component or render props with a single element prop. This prop expects a React element (e.g., <AboutPage />), not just a component reference. This change allows you to pass props easily to routed components.

Another major shift is the mandatory use of the <Routes> component as a container for all <Route> children. <Routes> is intelligent; it picks the best matching route and renders only that branch of the UI. This makes route ordering more predictable compared to v5. Furthermore, v6 embraces relative routing and linking. Paths and to props in <Link> are relative to their parent route by default, which leads to cleaner, more portable code, especially within nested layouts.

Dynamic Parameters and Nested Routes

Real applications rarely have only static paths. You often need to capture values from the URL itself, like a user ID or a product slug. React Router enables this through dynamic route parameters, denoted by a colon (:). You can access these parameters in your component using the useParams hook.

<Route path="/users/:userId" element={<UserProfile />} />

// Inside UserProfile.jsx
import { useParams } from 'react-router-dom';
function UserProfile() {
  let { userId } = useParams(); // Destructure the parameter
  // Fetch user data based on userId
}

For complex UIs with shared layouts (like a navigation bar that persists across several pages), nested routes are essential. In v6, you nest <Route> components directly inside each other. The parent route's element typically includes an <Outlet /> component, which acts as a placeholder where the matched child route's element will be rendered. This creates a clear, compositional hierarchy for your UI.

<Route path="/dashboard" element={<DashboardLayout />}>
  <Route index element={<DashboardHome />} /> // Renders at /dashboard
  <Route path="stats" element={<DashboardStats />} /> // Renders at /dashboard/stats
</Route>

// DashboardLayout.jsx
import { Outlet } from 'react-router-dom';
function DashboardLayout() {
  return (
    <div>
      <h1>Dashboard Header</h1>
      <Outlet /> {/* Child routes render here */}
    </div>
  );
}

Programmatic Navigation and Route Guards

Sometimes you need to navigate based on logic, not a user click (e.g., after a form submission). This is programmatic navigation, achieved using the useNavigate hook. The navigate function it returns can be called with a path or with a delta (like navigate(-1) to go back).

A critical application of programmatic navigation is implementing route guards (or protected routes). These are mechanisms to restrict access to certain routes based on conditions like authentication status. The pattern involves creating a wrapper component that checks the condition (e.g., isAuthenticated) and either renders the requested component or redirects the user (using useNavigate or the <Navigate> component) to a login page.

function ProtectedRoute({ children }) {
  const { user } = useAuth();
  const navigate = useNavigate();

  if (!user) {
    // Redirect to login
    return <Navigate to="/login" replace />;
  }
  return children;
}

// Usage
<Route path="/admin" element={
  <ProtectedRoute>
    <AdminPanel />
  </ProtectedRoute>
} />

Common Pitfalls

1. Forgetting the Router Wrapper: All routing components (<Link>, <Routes>) must be descendants of a <BrowserRouter> (or similar) component. A common mistake is trying to use useNavigate or Link outside this context, which will cause an error. Always ensure your app is wrapped at the root level.

1. Misunderstanding the element Prop in v6: In v6, you must pass a React element (<Component />), not the component itself (Component). Writing <Route path="/" element={HomePage} /> will fail silently or throw an error. The correct syntax is <Route path="/" element={<HomePage />} />.

1. Incorrect Path Matching with Nested Routes: When using nested routes, remember that paths are relative. Defining a child route as path="/stats" makes it absolute (matching /stats), while path="stats" makes it relative to its parent (matching /dashboard/stats). Also, ensure the parent route's element includes an <Outlet /> to render the children.

1. Overlooking the replace Prop on Redirects: When using <Navigate> or navigate() for redirects (like in a route guard), consider the replace prop. By default, navigation pushes a new entry into the browser's history stack. Using replace={true} replaces the current entry instead. This is often preferable for auth redirects, preventing users from getting stuck in a back-button loop to a page they can't access.

Summary

• React Router enables client-side navigation, creating fast, seamless SPAs by mapping URL paths to React components without full page reloads.
• The core building blocks are the <Router> provider, the <Link> component for navigation, and the <Route> component with its element prop (v6) to define the path-to-component mapping.
• Nested Routes, structured with parent routes containing <Outlet />, allow for complex, shared layouts and clear UI hierarchies.
• Dynamic parameters (e.g., :id) captured from the URL are accessed via the useParams hook, enabling data-driven views.
• Control navigation via code using the useNavigate hook, which is essential for implementing route guards that protect access to routes based on application state like user authentication.