What's the difference between and ?

triggers a full page reload — losing React state, downloading bundle again. calls history.pushState and tells the router to render the new route. Always use for internal navigation.

Intermediate⏱️ 10 min📘 Topic 10 of 13

🛣️ React Router — Client-Side Routing Made Simple

Add client-side routing to your React app with React Router. Routes, Links, useParams, useNavigate, nested routes, route loaders — with code examples and interview questions.

React doesn't include routing — the de-facto choice is React Router. The current major (v6/v7) is what most codebases use.

🏗️ The basic setup

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users/:id" element={<User />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

🪝 Common hooks

useParams() — read URL params: const { id } = useParams()
useNavigate() — programmatic nav: navigate('/login')
useLocation() — current URL + state
useSearchParams() — read/write query string

🧩 Nested routes + Outlet

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

// in DashLayout:
import { Outlet } from 'react-router-dom';
<main><Outlet /></main>

💡 Use `<Link>`, not `<a>`

Bare anchor tags trigger full page reloads. Link uses pushState — instant client-side navigation.

💻 Code Examples

Reading URL params

// Route: /users/:id
import { useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();
  return <h1>User #{id}</h1>;
}

Output:

/users/42 → 'User #42'

Programmatic navigation after login

import { useNavigate } from 'react-router-dom';

function Login() {
  const navigate = useNavigate();
  async function onSubmit(e) {
    e.preventDefault();
    await loginUser();
    navigate('/dashboard', { replace: true });
  }
  return <form onSubmit={onSubmit}>...</form>;
}

Output:

Form submits, then redirects to /dashboard (replace skips history entry).

⚠️ Common Mistakes

Using `<a href>` for in-app navigation — causes full page reload, losing state.
Forgetting `:` in dynamic segments (`/users/id` instead of `/users/:id`).
Missing the `*` catch-all route — broken URLs show a blank screen.
Wrapping everything in <BrowserRouter> twice — only one router can exist.

🎯 Interview Questions

Real questions asked at top product and service-based companies.

Q1.Why do you need a router in a React app?Beginner

React renders a single page. To show different views based on the URL — and let the user use back/forward — you need a router that listens to history changes and swaps components without reloading the page.

Q2.What's the difference between <Link> and <a>?Beginner

<a> triggers a full page reload — losing React state, downloading bundle again. <Link> calls history.pushState and tells the router to render the new route. Always use <Link> for internal navigation.

Q3.How do you read URL parameters?Intermediate

With useParams: `const { id } = useParams();` for path params, or useSearchParams for query strings: `const [params] = useSearchParams(); params.get('q');`.

Q4.What's a nested route?Intermediate

A route declared inside another route. The parent renders its layout containing an <Outlet />, where child routes render. Lets you share layout/state across related pages.

Q5.How would you protect a route (auth required)?Advanced

Create a wrapper component or 'guard' that checks auth state; if not logged in, render <Navigate to="/login" replace />. Wrap protected routes with it: `<Route element={<RequireAuth><Dashboard /></RequireAuth>} />`.

🧠 Quick Summary

React Router is the standard for client-side routing.
BrowserRouter > Routes > Route is the basic structure.
useParams, useNavigate, useLocation, useSearchParams.
Link, not <a>, for internal nav.
Use Outlet for nested layouts; guard auth with wrappers.