React Router

React Router: Client-Side Navigation Without Page Reloads

React Router is the standard routing library for React single-page applications. Instead of requesting a brand-new HTML document on every click, React Router updates the browser URL with the History API and swaps only the matching components inside the page.

Setting Up Routes, Links, and Dynamic Params

Install react-router-dom (or react-router v7+) and wrap your app in <BrowserRouter>. Use <Link> or <NavLink> instead of <a> tags so internal route transitions stay instant and preserve shared layout state.

import { BrowserRouter, Routes, Route, Link, useParams, Outlet } from 'react-router-dom';

function DocsLayout() {
  return (
    <div className="docs-shell">
      <nav>
        <Link to="/">Home</Link>
        <Link to="/guides/hooks">Hooks Guide</Link>
      </nav>
      <main>
        <Outlet />
      </main>
    </div>
  );
}

function GuideDetail() {
  const { topic } = useParams();
  return <h2>Viewing guide: {topic}</h2>;
}

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<DocsLayout />}>
          <Route index element={<h2>Welcome to Docs</h2>} />
          <Route path="guides/:topic" element={<GuideDetail />} />
          <Route path="*" element={<h2>404 — Page Not Found</h2>} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

Nested Layouts with <Outlet />

Parent <Route> elements render persistent shells such as navigation bars or sidebars. Placing <Outlet /> inside the parent marks the exact spot where matching child routes appear, eliminating repeated header wrappers across pages.

Common Routing Mistakes

• Using <a href="..."> for Internal Routes: Plain anchor tags trigger a full browser reload, wiping out all client state and context. Always use <Link to="...">.
• Forgetting Server Fallback Rules in Production: When deploying a single-page app to Nginx, Apache, or Netlify, configure the server to serve index.html for unknown paths so refreshing /guides/hooks does not return a 404.

Frequently Asked Questions

What is the difference between <Link> and <NavLink>?

<NavLink> automatically knows whether its to path matches the current URL, making it easy to style active sidebar or navbar links.

How do I navigate programmatically after a form submit?

Call the useNavigate() hook (const navigate = useNavigate()) and run navigate('/dashboard') once your save request completes.

When should I choose Next.js instead of React Router?

Choose Next.js when you need built-in Server Components, server-side HTML rendering for SEO, and zero-config API routes.