React Routing Interview Guide

Introduction

Routing is the process of navigating between different pages/components in a Single Page Application (SPA) without reloading the browser. React applications commonly use React Router for client-side routing.

<Route path="/home" element={<Home />} />

React Router

React Router enables navigation between views in React applications.

Features

• Client-side routing
• Dynamic routing
• Nested routing
• Route parameters
• Lazy loading support

Installation

npm install react-router-dom

BrowserRouter

BrowserRouter enables routing using the HTML5 History API.

import { BrowserRouter } from "react-router-dom";

<BrowserRouter>
  <App />
</BrowserRouter>

It updates the URL without refreshing the page.

BrowserRouter vs HashRouter

BrowserRouter	HashRouter
Uses History API	Uses URL hash (#)
Clean URLs	URLs contain #
Requires server configuration	No server configuration
Preferred for production	Useful for static hosting

BrowserRouter:
https://site.com/home

HashRouter:
https://site.com/#/home

Basic Routing Components

Route

Defines which component should render for a path.

<Route path="/about" element={<About />} />

Routes

Routes replaces Switch in React Router v6.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

Link

Navigates without refreshing the page.

<Link to="/about">About</Link>

Avoid:

<a href="/about">About</a>

NavLink

Supports active styling.

<NavLink to="/home">Home</NavLink>

<NavLink
  to="/home"
  className={({ isActive }) => (isActive ? "active" : "")}
/>

Navigation Hooks

useNavigate

const navigate = useNavigate();

navigate("/dashboard");

const handleLogin = () => {
  navigate("/home");
};

Passing State

navigate("/profile", {
  state: { name: "John" }
});

Retrieve it:

const location = useLocation();

console.log(location.state.name);

useLocation

const location = useLocation();

console.log(location.pathname);

Useful for:

• Active menus
• Analytics
• Breadcrumbs

useParams

Route:

<Route path="/user/:id" element={<User />} />

URL:

/user/101

Component:

const { id } = useParams();

console.log(id);

Output:

101

Dynamic Routes

/user/:id
/product/:productId
/order/:orderId

Example:

<Route path="/product/:id" element={<Product />} />

Nested Routes

<Route path="/dashboard" element={<Dashboard />}>
  <Route path="profile" element={<Profile />} />
  <Route path="settings" element={<Settings />} />
</Route>

Dashboard:

<Outlet />

Outlet

function Dashboard() {
  return (
    <>
      <Sidebar />
      <Outlet />
    </>
  );
}

Protected Routes

const ProtectedRoute = ({ children }) => {
  const isAuthenticated = true;

  return isAuthenticated ? children : <Navigate to="/login" />;
};

Usage:

<Route
  path="/dashboard"
  element={
    <ProtectedRoute>
      <Dashboard />
    </ProtectedRoute>
  }
/>

See the JWT Authentication in React Interview Guide for wiring this pattern up against real token checks.

Navigate Component

<Navigate to="/login" />

Equivalent:

navigate("/login");

404 Handling

<Route path="*" element={<NotFound />} />

Lazy Loading Routes

Wrap a route’s element in React.lazy/Suspense so its bundle downloads only when the user navigates to it. See the React Code Splitting Interview Guide for the full route-based splitting pattern and internal chunk-loading flow.

Query Parameters

URL:

/products?page=1&sort=asc

const [searchParams] = useSearchParams();

const page = searchParams.get("page");
const sort = searchParams.get("sort");

Route Parameters vs Query Parameters

Route Parameters	Query Parameters
/user/101	/products?page=2
Identify a specific resource	Filtering, sorting, pagination

// Route
/user/:id

Role-Based Routing

if (user.role !== "ADMIN") {
  return <Navigate to="/unauthorized" />;
}

Routing Performance Optimization

• Route-based code splitting
• Lazy loading
• Memoization
• Avoid unnecessary re-renders
• Prefetch critical routes

const UserPage = lazy(() => import("./UserPage"));

How React Router Works

flowchart LR
    A[User changes URL] --> B[History API updates location]
    B --> C[React Router detects change]
    C --> D[Matches best route]
    D --> E[Renders corresponding component]
    E --> F[No full page refresh]

Steps:

1. Browser URL changes.
2. History API updates the URL.
3. React Router listens for changes.
4. Matching route is found.
5. Correct component is rendered.
6. Navigation occurs without a page refresh.

Client-side vs Server-side Routing

Client-side	Server-side
React Router	Traditional MVC
No page refresh	Full page refresh
Faster navigation	Slower
SPA	MPA

Enterprise Routing Design

Recommended structure:

routes/
- authRoutes.js
- adminRoutes.js
- customerRoutes.js
- appRoutes.js

Best practices:

• Feature-based route organization
• Lazy-load modules
• Role-based access control
• Route guards
• Error boundaries
• 404 handling
• Centralized route constants

Key Takeaways

• React Router enables efficient client-side navigation in SPAs.
• Prefer BrowserRouter for production unless static hosting requires HashRouter.
• Use hooks like useNavigate, useLocation, useParams, and useSearchParams for routing logic.
• Nested routes with Outlet improve layout composition.
• Protected routes, lazy loading, and route-based code splitting improve security and performance.
• Organize routes by feature/module for scalable enterprise applications.