Routing

React doesn't include routing — React Router is the standard library for client-side navigation. It maps URL paths to components, enabling single-page application navigation without full page reloads.

Core Concepts

• <BrowserRouter> wraps the app and uses the HTML5 History API for clean URLs (/about, /users/123)
• <Routes> contains route definitions
• <Route path="/about" element={<About />} /> maps a URL path to a component
• <Link to="/about"> and <NavLink to="/about"> render anchor tags that navigate without page reload. NavLink adds active styling automatically
• <Outlet /> renders the matched child route — this is how nested layouts work

Nested Routes

Routes can be nested to create layout hierarchies. A parent route renders a layout component with <Outlet />, and child routes fill the outlet:

<Route path="/dashboard" element={<DashboardLayout />}>
  <Route index element={<Overview />} />
  <Route path="settings" element={<Settings />} />
</Route>

DashboardLayout contains shared navigation and renders <Outlet /> where child content appears. This pattern eliminates layout duplication.

Key Hooks

• useNavigate() — returns a function for programmatic navigation: navigate('/login') or navigate(-1) to go back
• useParams() — reads dynamic URL segments: /users/:id → { id: '123' }
• useSearchParams() — reads and writes query string parameters: ?page=2&sort=name
• useLocation() — returns the current location object (pathname, search, hash, state)

Data APIs (v6.4+)

React Router v6.4 introduced data-driven routing inspired by Remix:

• loader functions fetch data before a route renders — no loading spinners inside components
• action functions handle form submissions and mutations
• useLoaderData() accesses the data returned by the loader
• <Form> component submits to the route's action function
• useNavigation() tracks in-progress navigations for global loading indicators

This pattern moves data fetching from components to the routing layer, eliminating fetch-on-render waterfalls.

Router Types

• BrowserRouter — uses History API, requires server to serve index.html for all routes
• HashRouter — uses URL hash (#/about), works on static hosting without server config
• MemoryRouter — keeps URL in memory, useful for tests and non-browser environments

Protected Routes

Redirect unauthorized users by checking auth state in a loader (return redirect('/login')) or by wrapping routes in a guard component that checks auth and renders either the child or a redirect.

Key Interview Distinction

React Router v6+ uses nested routes with Outlet for layout composition, hooks for navigation and URL reading, and optional data APIs (loaders/actions) for data-driven routing. The data APIs move data fetching from components to routes, eliminating loading waterfalls. Nested routes with Outlet are the idiomatic way to share layouts across related pages.