---

Source: z2h.fyi/cheatsheets/react-routing — Zero to Hero cheatsheets for developers.

React Routing

Quick Overview

React Router v6 provides a declarative way to handle client‑side navigation in React applications.

Getting Started

• Install with npm i react-router-dom@6.
• Wrap your app with <BrowserRouter>.

Core Concepts

Concept	Description
Routes	Define a path → element mapping.
Nested Routes	Build layout hierarchies.
Params	Extract URL parameters.
Redirects	Use <Navigate> for redirects.
Lazy Loading	Load route components lazily.

Essential Commands / Syntax

• <Routes><Route path="/about" element={<About/>} /></Routes>
• useParams() – read dynamic segments.
• useNavigate() – programmatic navigation.
• const About = React.lazy(() => import('./About')) – lazy route.

Common Patterns

• Layout Route – parent route with an <Outlet> for children.
• Protected Route – guard routes based on auth state.
• Code‑Splitting – lazy‑load route components for performance.

Gotchas & Tips

• Route order matters; more specific routes should come first.
• Remember to add a fallback UI when using lazy routes.
• useNavigate replaces the older history API.

Next Steps

• Read the official React Router v6 docs.
• Try the “React Router Fundamentals” course on Frontend Masters.