> ## Documentation Index
> Fetch the complete documentation index at: https://docs.anujpandey.in/llms.txt
> Use this file to discover all available pages before exploring further.
# Reactrouter
# React Router — Complete In-Depth Theory Guide
*(Nested Routes, Layout Routes, Dynamic Routes, Protected Routes, Lazy Loading Routes)*
***
# 1. Introduction
## What is React Router?
**React Router** is a standard library for handling **client-side routing** in React applications. It allows you to build **Single Page Applications (SPAs)** where navigation between pages happens **without full page reloads**.
It provides features like:
* **Nested Routes** → UI hierarchy mapped to route hierarchy
* **Layout Routes** → Shared UI (headers, sidebars) across pages
* **Dynamic Routes** → URL parameters (e.g., `/user/:id`)
* **Protected Routes** → Access control (auth-based routing)
* **Lazy Loading Routes** → Code-splitting for performance
***
## Why is it important in React?
Without routing:
* Entire app reloads on navigation
* Poor user experience
* Hard to manage state
With React Router:
* Fast navigation (client-side rendering)
* URL reflects UI state
* Enables deep linking & bookmarking
* Scalable architecture for large apps
***
## When and why we use it
Use React Router when:
* Building SPAs with multiple views
* Need dynamic URLs (e.g., `/product/123`)
* Want authentication-based navigation
* Need nested UI (dashboard layouts, tabs)
* Want performance optimization (lazy loading)
***
# 2. Concepts / Internal Workings
## Core Concept: Client-Side Routing
React Router intercepts navigation events and:
1. Prevents full page reload
2. Matches URL with route config
3. Renders corresponding components
***
## Key Building Blocks
### 1. Router Provider
```jsx theme={null}
import { BrowserRouter } from "react-router-dom";
```
* Uses **HTML5 history API**
* Keeps UI in sync with URL
***
### 2. Routes & Route Matching
```jsx theme={null}
import { Routes, Route } from "react-router-dom";
} />
} />
```
* Matches **best possible route**
* Uses **path ranking algorithm**
***
## Nested Routes (Core Idea)
Routes can be nested to reflect UI structure:
```jsx theme={null}
}>
} />
```
* Parent renders ``
* Child routes render inside it
***
## Layout Routes
A layout route defines shared UI:
```jsx theme={null}
function Layout() {
return (
<>
);
}
```
Used for:
* Headers
* Sidebars
* Common wrappers
***
## Dynamic Routes
```jsx theme={null}
} />
```
Access param:
```jsx theme={null}
import { useParams } from "react-router-dom";
const { id } = useParams();
```
***
## Protected Routes
Used for authentication:
```jsx theme={null}
function ProtectedRoute({ children }) {
const isAuth = true;
return isAuth ? children : ;
}
```
***
## Lazy Loading Routes
```jsx theme={null}
const Dashboard = React.lazy(() => import("./Dashboard"));
}>
```
Improves:
* Initial load time
* Bundle size
***
## Internal Working (Important)
React Router works by:
1. **Listening to URL changes**
* `history.pushState`
* `popstate` events
2. **Route Matching Algorithm**
* Static > Dynamic > Wildcards
* Most specific route wins
3. **Rendering Tree**
* Builds a tree of matched routes
* Renders nested UI via ``
***
## Relationship with React Features
| React Feature | Relationship |
| ------------------------ | ----------------------------------------- |
| **Hooks** | `useParams`, `useNavigate`, `useLocation` |
| **Context API** | Router uses context internally |
| **Suspense** | Used in lazy-loaded routes |
| **Concurrent Rendering** | Works with transitions |
| **Code Splitting** | Via `React.lazy` |
***
# 3. Syntax & Examples
***
## Basic Routing Example
```jsx theme={null}
import { BrowserRouter, Routes, Route } from "react-router-dom";
function App() {
return (
} />
} />
);
}
```
***
## Nested Routes Example
```jsx theme={null}
function Dashboard() {
return (
Dashboard
);
}
}>
} />
} />
```
***
## Layout Routes Example
```jsx theme={null}
function MainLayout() {
return (
<>
);
}
}>
} />
} />
```
***
## Dynamic Routes Example
```jsx theme={null}
} />
```
```jsx theme={null}
function Product() {
const { productId } = useParams();
return Product ID: {productId}
;
}
```
***
## Protected Routes Example
```jsx theme={null}
function ProtectedRoute({ children }) {
const user = { isLoggedIn: true };
if (!user.isLoggedIn) {
return ;
}
return children;
}
```
Usage:
```jsx theme={null}
}
/>
```
***
## Lazy Loading Routes Example
```jsx theme={null}
const Home = React.lazy(() => import("./Home"));
function App() {
return (
Loading...}>
} />
);
}
```
***
## Navigation
```jsx theme={null}
import { Link, useNavigate } from "react-router-dom";
Go to About
const navigate = useNavigate();
navigate("/dashboard");
```
***
# 4. Edge Cases / Common Mistakes
***
## 1. Missing `` in Nested Routes
❌ Problem:
Child routes won’t render.
```jsx theme={null}
function Dashboard() {
return Dashboard
; // No Outlet
}
```
✅ Fix:
```jsx theme={null}
```
***
## 2. Wrong Path in Nested Routes
```jsx theme={null}
// ❌ wrong
```
✅ Correct:
```jsx theme={null}
// relative path
```
***
## 3. Infinite Redirect in Protected Routes
```jsx theme={null}
return ;
```
If login page also wrapped → loop
✅ Fix:
* Ensure login route is public
***
## 4. Lazy Loading Without Suspense
❌ Will crash app
```jsx theme={null}
const Page = React.lazy(() => import("./Page"));
```
✅ Always wrap:
```jsx theme={null}
} />
```
***
## 5. Route Matching Conflicts
```jsx theme={null}
```
* `/user/settings` might match dynamic route incorrectly
✅ Solution:
* Order properly or use specific routes
***
## 6. Losing State on Navigation
* Using full reload instead of client navigation
❌ ``
✅ ``
***
## 7. Incorrect use of `useNavigate`
Calling navigate during render:
```jsx theme={null}
if (!auth) navigate("/login"); // ❌
```
✅ Use inside `useEffect`
***
# 5. Best Practices
***
## 1. Organize Routes Centrally
```jsx theme={null}
const routes = [
{ path: "/", element: },
];
```
Benefits:
* Scalable
* Easy maintenance
***
## 2. Use Layout Routes Effectively
* Avoid repeating UI (Navbar, Sidebar)
* Improves readability
***
## 3. Prefer Relative Routing
```jsx theme={null}
```
Instead of absolute paths
***
## 4. Code Splitting (Lazy Loading)
* Lazy load heavy pages
* Improves performance
***
## 5. Use Route-Based Access Control
* Keep auth logic separate
* Reusable ProtectedRoute
***
## 6. Avoid Over-Nesting
Too many nested routes:
* Hard to debug
* Complex mental model
***
## 7. Use Meaningful URL Structure
Good:
```
/dashboard/profile
/product/123
```
Bad:
```
/p?id=123
```
***
## 8. Handle 404 Pages
```jsx theme={null}
} />
```
***
## 9. Use Hooks Properly
* `useParams` → dynamic values
* `useLocation` → current URL
* `useNavigate` → programmatic navigation
***
## 10. Performance Considerations
* Use lazy loading for large apps
* Avoid unnecessary re-renders in layouts
* Split routes by feature
***
# Final Mental Model
Think of React Router as:
> **A tree of UI mapped directly to a tree of URLs**
* URL → Route Matching → Component Tree → UI Render
* Nested routes = nested UI
* Layout routes = shared UI layers
* Dynamic routes = data-driven UI
* Protected routes = controlled access
* Lazy routes = optimized delivery
***
Here’s a **complete, structured breakdown of all important elements (components + hooks + utilities)** used in React Router (v6+) along with **how they work internally and when to use them**.
***
# React Router — Elements & Their Working
We can group everything into:
1. **Core Router Components**
2. **Route Rendering Components**
3. **Navigation Components**
4. **Data Access Hooks**
5. **Navigation Hooks**
6. **Advanced / Utility Components**
***
# 1. Core Router Components
## 1.1 `BrowserRouter`
```jsx theme={null}
import { BrowserRouter } from "react-router-dom";
```
### What it does:
* Wraps your entire app
* Enables routing using **HTML5 History API**
### Internal Working:
* Uses `history.pushState` & `popstate`
* Stores current location in context
* Triggers re-render on URL change
***
## 1.2 `HashRouter`
```jsx theme={null}
```
### What it does:
* Uses URL hash (`/#/about`)
* Good for static hosting (no server config)
### Internal Working:
* Listens to `window.location.hash`
* No server involvement
***
## 1.3 `MemoryRouter`
```jsx theme={null}
```
### What it does:
* Keeps routes in memory (no URL)
* Used in:
* Testing
* React Native
***
# 2. Route Rendering Components
***
## 2.1 `Routes`
```jsx theme={null}
} />
```
### What it does:
* Container for all routes
* Matches best route
### Internal Working:
* Uses route ranking algorithm
* Builds a **match tree**
***
## 2.2 `Route`
```jsx theme={null}
} />
```
### Props:
* `path`
* `element`
* `children` (nested routes)
### Internal Working:
* Defines mapping between URL and component
* Supports:
* Static paths
* Dynamic params
* Nested structure
***
## 2.3 `Outlet`
```jsx theme={null}
function Layout() {
return ;
}
```
### What it does:
* Placeholder for child routes
### Internal Working:
* React Router injects matched child component
* Works via context propagation
***
# 3. Navigation Components
***
## 3.1 `Link`
```jsx theme={null}
About
```
### What it does:
* Client-side navigation
### Internal Working:
* Prevents default `` reload
* Calls `history.pushState`
***
## 3.2 `NavLink`
```jsx theme={null}
About
```
### Extra Features:
* Adds active class automatically
```jsx theme={null}
isActive ? "active" : ""}
/>
```
***
## 3.3 `Navigate`
```jsx theme={null}
```
### What it does:
* Redirect component
### Internal Working:
* Triggers navigation on render
* Uses history replace/push
***
# 4. Data Access Hooks
***
## 4.1 `useParams`
```jsx theme={null}
const { id } = useParams();
```
### What it does:
* Reads dynamic route params
### Internal Working:
* Extracts values from matched route
***
## 4.2 `useLocation`
```jsx theme={null}
const location = useLocation();
```
### Returns:
```js theme={null}
{
pathname,
search,
hash,
state
}
```
### Use Cases:
* Detect route change
* Access query params
***
## 4.3 `useMatch`
```jsx theme={null}
const match = useMatch("/user/:id");
```
### What it does:
* Matches current URL manually
***
# 5. Navigation Hooks
***
## 5.1 `useNavigate`
```jsx theme={null}
const navigate = useNavigate();
navigate("/dashboard");
navigate(-1); // back
```
### What it does:
* Programmatic navigation
### Internal Working:
* Wraps history API
* Supports:
* push
* replace
* go back/forward
***
# 6. Advanced / Utility Components
***
## 6.1 `Suspense` (React, but critical for Router)
```jsx theme={null}
}>
```
### Why used:
* Required for lazy-loaded routes
***
## 6.2 `React.lazy`
```jsx theme={null}
const Page = React.lazy(() => import("./Page"));
```
### What it does:
* Splits bundle per route
***
## 6.3 `createBrowserRouter` (Modern API)
```jsx theme={null}
import { createBrowserRouter } from "react-router-dom";
const router = createBrowserRouter([
{
path: "/",
element: ,
},
]);
```
### Used with:
```jsx theme={null}
import { RouterProvider } from "react-router-dom";
```
### Benefits:
* Data APIs
* Better structure
* Centralized config
***
## 6.4 `RouterProvider`
```jsx theme={null}
```
### What it does:
* Replaces `BrowserRouter`
* Works with modern routing
***
## 6.5 `useSearchParams`
```jsx theme={null}
const [searchParams, setSearchParams] = useSearchParams();
searchParams.get("q");
```
### What it does:
* Works with query strings
***
## 6.6 `useOutlet`
```jsx theme={null}
const outlet = useOutlet();
```
### What it does:
* Access child route element manually
***
## 6.7 `useNavigation` (Data Router)
```jsx theme={null}
const navigation = useNavigation();
```
### What it does:
* Track loading states during navigation
***
## 6.8 `useLoaderData` (Data Router)
```jsx theme={null}
const data = useLoaderData();
```
### What it does:
* Access preloaded route data
***
## 6.9 `useActionData`
```jsx theme={null}
const actionData = useActionData();
```
### What it does:
* Access form submission results
***
## 6.10 `Form` (Data Router)
```jsx theme={null}
```
### What it does:
* Handles form submission with routing
***
## 6.11 `ScrollRestoration`
```jsx theme={null}
```
### What it does:
* Restores scroll position on navigation
***
## 6.12 `Await`
```jsx theme={null}
{(data) => {data}
}
```
### What it does:
* Handles async route data
***
# Summary Table
| Type | Element | Purpose |
| ---------- | ------------------- | ------------------------- |
| Core | BrowserRouter | Enables routing |
| Core | HashRouter | Hash-based routing |
| Core | MemoryRouter | In-memory routing |
| Routing | Routes | Route container |
| Routing | Route | Define route |
| Routing | Outlet | Render child routes |
| Navigation | Link | Navigate without reload |
| Navigation | NavLink | Active navigation |
| Navigation | Navigate | Redirect |
| Hooks | useParams | Get URL params |
| Hooks | useLocation | Get current URL |
| Hooks | useNavigate | Navigate programmatically |
| Hooks | useMatch | Match route |
| Hooks | useSearchParams | Query params |
| Advanced | createBrowserRouter | Modern router |
| Advanced | RouterProvider | Router engine |
| Advanced | useLoaderData | Fetch route data |
| Advanced | Form | Form handling |
| Advanced | Suspense | Lazy loading |
| Advanced | React.lazy | Code splitting |
***
# Final Mental Model
React Router provides:
* **Declarative routing** → ``
* **Composable layouts** → ``
* **Navigation control** → `Link`, `useNavigate`
* **Data flow** → loaders/actions
* **Performance tools** → lazy loading
***
Below is a **senior-level, high-depth conceptual interview set** on React Router.
Each question is designed to test **mental models, trade-offs, and real-world reasoning** — not surface knowledge.
***
# React Router — Advanced Conceptual Questions (Senior Level)
***
## 1. How does React Router actually match routes internally, and why does route order matter less in v6?
### Answer
React Router v6 uses a **ranking algorithm** instead of relying on declaration order (like v5).
### How it works:
* Each route is scored based on specificity:
* Static segments → highest priority (`/users/settings`)
* Dynamic segments → medium (`/users/:id`)
* Wildcards → lowest (`*`)
* The router builds a **route tree**, then finds the **best match**
### Why this matters:
* You don’t need to manually reorder routes
* Prevents bugs caused by incorrect ordering
### Example:
```jsx theme={null}
```
Even if defined in reverse order, `/users/settings` will match correctly.
### Trade-off:
* Slightly more complex internal logic
* But far safer and predictable
***
## 2. Explain how nested routes map to the component tree. Why is `` critical?
### Answer
Nested routes mirror a **hierarchical UI structure**.
### Mental model:
> URL → Route Tree → Component Tree
```jsx theme={null}
}>
} />
```
### Rendering:
* `/dashboard/profile` renders:
* ``
* Inside it → `` via ``
### Why `` is critical:
* It acts as a **render slot**
* Without it, children have no place to render
### Pitfall:
Missing `` silently breaks nested rendering.
***
## 3. What problem do layout routes solve, and how are they different from higher-order components?
### Answer
Layout routes solve **UI duplication and structural consistency**.
### Example:
```jsx theme={null}
}>
} />
```
### Why not HOCs?
| Layout Routes | HOCs |
| ----------------------- | ------------------- |
| Declarative | Imperative wrapping |
| Works with routing tree | External to routing |
| Preserves hierarchy | Flattens structure |
### Key insight:
Layout routes are **route-aware UI composition**, not just component reuse.
***
## 4. How does React Router handle dynamic route parameters internally?
### Answer
Dynamic segments (`:id`) are parsed during matching.
### Process:
1. URL is split into segments
2. Route pattern is compared
3. Dynamic segments are extracted into key-value pairs
```jsx theme={null}
```
URL: `/user/42`
```js theme={null}
useParams() → { id: "42" }
```
### Important:
* Params are always **strings**
* No type safety by default
### Pitfall:
Expecting numbers → must parse manually
***
## 5. Why is client-side routing fundamentally different from server-side routing?
### Answer
### Client-side routing:
* Happens in browser
* No full page reload
* Uses History API
### Server-side routing:
* Server returns new HTML per request
### Key difference:
| Aspect | Client | Server |
| ----------- | ----------------- | ------ |
| Performance | Faster navigation | Slower |
| SEO | Needs SSR | Native |
| State | Preserved | Reset |
### Trade-off:
Client-side routing improves UX but requires:
* Proper fallback handling
* SSR for SEO-critical apps
***
## 6. How do protected routes work under the hood, and what are common pitfalls?
### Answer
Protected routes are **not built-in** — they are patterns.
### Basic pattern:
```jsx theme={null}
function ProtectedRoute({ children }) {
return isAuth ? children : ;
}
```
### Under the hood:
* Conditional rendering
* Redirect triggered via ``
### Pitfalls:
#### 1. Infinite redirect loops
If login route is also protected
#### 2. Flash of protected UI
Auth check async → UI renders briefly
### Solution:
* Add loading state before rendering
***
## 7. Why is lazy loading routes important, and what are its hidden trade-offs?
### Answer
### Benefits:
* Smaller initial bundle
* Faster first paint
```jsx theme={null}
const Page = React.lazy(() => import("./Page"));
```
### Trade-offs:
#### 1. Loading delay per route
* Adds latency when navigating
#### 2. Suspense boundaries needed
* Without fallback → crash
#### 3. Waterfall problem
* Multiple lazy components → sequential loading
### Optimization:
* Preload critical routes
* Group related routes
***
## 8. How does `useNavigate` differ from `` conceptually?
### Answer
| Feature | `` | `useNavigate` |
| -------- | ------------- | ---------------------- |
| Type | Declarative | Imperative |
| Use case | UI navigation | Logic-based navigation |
### Example:
```jsx theme={null}
navigate("/dashboard");
```
### Insight:
* `` → user-driven navigation
* `useNavigate` → programmatic control
### Pitfall:
Calling navigate during render → causes errors
***
## 9. How does React Router integrate with React’s rendering model?
### Answer
React Router uses:
* **Context API** → share location & matches
* **Re-render triggers** → on URL change
### Flow:
1. URL changes
2. Router updates context
3. Components using hooks re-render
### Key insight:
Routing is just **state management for URL**
***
## 10. What are the trade-offs between `BrowserRouter` and `HashRouter`?
### Answer
| Feature | BrowserRouter | HashRouter |
| ------------- | ------------- | ---------- |
| URL | Clean | `/#/` |
| Server config | Required | Not needed |
| SEO | Better | Worse |
### Decision:
* Use `BrowserRouter` for production apps
* Use `HashRouter` for static hosting without backend control
***
## 11. How do you design scalable routing architecture in large applications?
### Answer
### Principles:
* Feature-based route splitting
* Central route config
* Lazy loading per module
```jsx theme={null}
const routes = [
{
path: "/dashboard",
element: ,
},
];
```
### Why:
* Improves maintainability
* Enables team scalability
***
## 12. What happens when multiple routes match the same URL?
### Answer
React Router selects **best match** based on ranking.
### Example:
```jsx theme={null}
/user/:id
/user/settings
```
* `/user/settings` wins
### Why:
* Static segments outrank dynamic ones
***
## 13. Why is relative routing preferred in nested routes?
### Answer
```jsx theme={null}
```
instead of:
```jsx theme={null}
```
### Benefits:
* Less duplication
* Easier refactoring
* Keeps hierarchy consistent
***
## 14. How does React Router handle 404 pages?
### Answer
Using wildcard route:
```jsx theme={null}
} />
```
### Internal behavior:
* Matches when no other route matches
### Pitfall:
Placing it incorrectly can override valid routes
***
## 15. Explain how query parameters differ from route params.
### Answer
| Type | Example | Access |
| ------------ | ------------ | ------------------- |
| Route params | `/user/:id` | `useParams()` |
| Query params | `/user?id=1` | `useSearchParams()` |
### Key difference:
* Route params → structural
* Query params → optional/filter data
***
## 16. How do layout routes improve performance and maintainability?
### Answer
### Performance:
* Prevent re-rendering shared components
* Avoid duplicate DOM trees
### Maintainability:
* Centralized layout logic
* Cleaner route hierarchy
***
## 17. What are common mistakes developers make with nested routes?
### Answer
1. Missing ``
2. Using absolute paths inside nested routes
3. Over-nesting routes unnecessarily
### Why they fail:
* Break rendering chain
* Increase complexity
***
## 18. How would you debug a route that is not rendering?
### Answer
### Systematic approach:
1. Check route path
2. Verify nesting
3. Ensure `` exists
4. Inspect URL
5. Use `useLocation()`
### Insight:
Debug routing like **state mismatch problem**
***
## 19. How does React Router enable code splitting at scale?
### Answer
* Combine with `React.lazy`
* Load routes on demand
### Advanced pattern:
```jsx theme={null}
const routes = [
{
path: "/admin",
element: ,
},
];
```
### Benefit:
* Reduces initial JS payload
***
## 20. What are the limitations of React Router?
### Answer
1. No built-in auth system
2. Requires manual SSR integration
3. Complex nested structures can become hard to manage
4. Data fetching not automatic (unless using data router APIs)
### Insight:
React Router is a **routing library, not a full framework**
***
# Final Thought
A senior-level understanding of React Router is not about APIs — it’s about:
* **Mapping URL → UI hierarchy**
* **Understanding rendering flow**
* **Managing complexity at scale**
* **Balancing performance vs UX**
***
Below is a **senior-level MCQ set (18 questions)** designed to test **deep understanding, edge cases, and real-world behavior** of React Router.
***
# React Router — Advanced MCQs
***
## 1. Route Matching Specificity
Given:
```jsx theme={null}
} />
} />
```
What renders at `/users/settings`?
**Options:**
A. ``
B. ``
C. Both components
D. Nothing renders
**✅ Correct Answer:** B
### Explanation:
React Router v6 uses **ranking**, not order. Static routes (`/settings`) are more specific than dynamic (`:id`).
### Why others are wrong:
* A: Would happen in older routers or poor matching logic
* C: Only one best match is rendered
* D: A match clearly exists
***
## 2. Missing ``
```jsx theme={null}
function Dashboard() {
return Dashboard
;
}
```
Nested route:
```jsx theme={null}
}>
} />
```
What happens at `/dashboard/profile`?
**Options:**
A. Only Dashboard renders
B. Only Profile renders
C. Both render
D. Runtime error
**✅ Correct Answer:** A
### Explanation:
Without ``, child routes have no render target.
### Why others are wrong:
* B: Parent must render first
* C: Requires ``
* D: No crash — silent failure
***
## 3. Absolute vs Relative Paths
```jsx theme={null}
}>
} />
```
What is true?
**Options:**
A. `/dashboard/profile` works
B. `/profile` works independently
C. Both A and B
D. Neither works
**✅ Correct Answer:** B
### Explanation:
`/profile` is **absolute**, not nested under `/dashboard`.
### Why others are wrong:
* A: Wrong — not nested
* C: Only B is correct
* D: `/profile` still works
***
## 4. Infinite Redirect Scenario
```jsx theme={null}
}
/>
```
If `/login` is also wrapped in `ProtectedRoute`, what happens?
**Options:**
A. App crashes
B. Infinite redirect loop
C. Dashboard renders
D. Login renders once
**✅ Correct Answer:** B
### Explanation:
Unauthenticated → redirect to `/login` → again protected → redirect again.
### Why others are wrong:
* A: No crash, just loop
* C/D: Never stabilizes
***
## 5. Lazy Loading Without Suspense
```jsx theme={null}
const Page = React.lazy(() => import("./Page"));
} />
```
What happens?
**Options:**
A. Works fine
B. Blank screen
C. Runtime error
D. Infinite loading
**✅ Correct Answer:** C
### Explanation:
Lazy components **must be wrapped in ``**.
***
## 6. `useNavigate` in Render
```jsx theme={null}
if (!auth) {
navigate("/login");
}
```
What’s the issue?
**Options:**
A. Works fine
B. Causes re-render loop
C. Throws error
D. Only runs once
**✅ Correct Answer:** B
### Explanation:
Calling navigation during render triggers state updates → loop.
***
## 7. Dynamic Params Type
```jsx theme={null}
```
What is the type of `id`?
**Options:**
A. number
B. string
C. depends on URL
D. undefined
**✅ Correct Answer:** B
### Explanation:
All params are **strings**, regardless of numeric value.
***
## 8. Nested Route Rendering Order
For `/dashboard/settings`:
```jsx theme={null}
}>
} />
```
What renders first?
**Options:**
A. Settings
B. Dashboard
C. Both simultaneously
D. Depends on load time
**✅ Correct Answer:** B
### Explanation:
Parent renders first → `` injects child.
***
## 9. Multiple Matches
Can multiple routes render simultaneously?
**Options:**
A. Yes always
B. No, only one best match
C. Only with nested routes
D. Only with wildcard
**✅ Correct Answer:** C
### Explanation:
Nested routes create multiple render layers.
***
## 10. Wildcard Route Behavior
```jsx theme={null}
} />
```
When does it render?
**Options:**
A. Always
B. Only when no other route matches
C. Only for nested routes
D. Only for root
**✅ Correct Answer:** B
***
## 11. Layout Route Behavior
```jsx theme={null}
}>
} />
```
What is true?
**Options:**
A. Layout always renders
B. Layout renders only for matching children
C. Layout replaces Home
D. Layout is ignored
**✅ Correct Answer:** B
***
## 12. `Link` vs ``
Why prefer ``?
**Options:**
A. Styling
B. Prevents reload
C. SEO
D. Faster rendering
**✅ Correct Answer:** B
### Explanation:
`` uses client-side navigation → no full reload.
***
## 13. Route Order in v6
Does route order matter?
**Options:**
A. Always
B. Never
C. Only for dynamic routes
D. Rarely (due to ranking)
**✅ Correct Answer:** D
***
## 14. Query vs Params
Which is correct?
**Options:**
A. Params are optional
B. Query params are part of path
C. Params define route structure
D. Query params replace params
**✅ Correct Answer:** C
***
## 15. Lazy Loading Trade-off
Main downside?
**Options:**
A. Larger bundle
B. Slower initial load
C. Delay during navigation
D. No SEO
**✅ Correct Answer:** C
***
## 16. Protected Route UX Issue
What is a common UX issue?
**Options:**
A. Memory leak
B. Flash of protected content
C. Double rendering
D. Broken routing
**✅ Correct Answer:** B
***
## 17. `useLocation` Use Case
Best use?
**Options:**
A. Navigation
B. Access current URL info
C. Redirect
D. Match routes
**✅ Correct Answer:** B
***
## 18. Over-nesting Routes
Main issue?
**Options:**
A. Performance crash
B. Hard to reason/debug
C. Routing stops working
D. Bundle size increases
**✅ Correct Answer:** B
***
# Final Insight
These questions test whether a candidate understands:
* **Routing as a tree, not flat mapping**
* **Rendering flow via ``**
* **Matching algorithm vs order**
* **Real-world pitfalls (auth, lazy, nesting)**
***
Below is a **carefully designed set of 18 senior-level coding problems** on React Router.
Each problem simulates **real-world scenarios**, focusing on **architecture, edge cases, and decision-making**.
***
# React Router — Advanced Coding Problems
***
## 1. Dashboard with Nested Routes
### Problem
Build a dashboard with:
* `/dashboard`
* `/dashboard/profile`
* `/dashboard/settings`
### Constraints
* Shared sidebar must persist
* No re-render of sidebar on route change
### Expected Behavior
* Sidebar always visible
* Content switches inside main panel
### Edge Cases
* Direct navigation to `/dashboard/settings`
* Browser back/forward navigation
### Solution Approach
1. Create `DashboardLayout`
2. Use `` for nested rendering
```jsx theme={null}
}>
} />
```
***
## 2. Auth-Protected Admin Panel
### Problem
Protect `/admin` routes:
* Only logged-in users allowed
### Constraints
* Redirect to `/login` if not authenticated
* Preserve intended destination
### Expected Behavior
* After login → redirect back to `/admin`
### Edge Case
* User refreshes page
### Solution
Use location state:
```jsx theme={null}
```
***
## 3. Dynamic Product Page
### Problem
Route `/product/:id` that fetches product data.
### Constraints
* Show loader while fetching
* Handle invalid IDs
### Edge Cases
* ID not found
* Network failure
### Solution
```jsx theme={null}
const { id } = useParams();
```
Fetch inside `useEffect`
***
## 4. Lazy Loaded Route System
### Problem
Split app into:
* Home
* Dashboard
* Admin
### Constraints
* Only load code when route accessed
### Edge Case
* Multiple lazy components loading together
### Solution
```jsx theme={null}
const Dashboard = React.lazy(() => import("./Dashboard"));
```
Wrap with ``
***
## 5. Role-Based Protected Routes
### Problem
* Admin routes only for `admin`
* User routes for `user`
### Constraints
* Multiple roles
* Reusable logic
### Solution
```jsx theme={null}
if (role !== "admin") return ;
```
***
## 6. 404 Page with Nested Routes
### Problem
Show 404 for:
* Unknown routes
* Unknown nested routes
### Edge Case
* `/dashboard/unknown`
### Solution
```jsx theme={null}
} />
```
***
## 7. Breadcrumb Navigation
### Problem
Generate breadcrumbs from route hierarchy
### Constraints
* Dynamic routes included
### Expected Output
`Home > Dashboard > Profile`
### Solution
Use `useLocation()` and split pathname
***
## 8. Modal Routing (Overlay UI)
### Problem
Clicking `/photos/1` opens modal over current page
### Constraints
* Background page remains visible
### Edge Case
* Direct URL access
### Solution
Use location state:
```jsx theme={null}
location.state?.backgroundLocation
```
***
## 9. Persist Scroll Position
### Problem
Restore scroll position on navigation
### Solution
Use:
```jsx theme={null}
```
***
## 10. Query-Based Filtering
### Problem
`/products?category=electronics`
### Constraints
* Sync UI with URL
### Solution
```jsx theme={null}
const [params] = useSearchParams();
```
***
## 11. Multi-Step Form Routing
### Problem
Steps:
* `/form/step-1`
* `/form/step-2`
### Constraints
* Prevent skipping steps
### Solution
Store progress in state/context
***
## 12. Route-Based Code Splitting Strategy
### Problem
Optimize large app
### Constraints
* Avoid too many small bundles
### Solution
* Group related routes
* Lazy load feature modules
***
## 13. Navigation Guard (Unsaved Changes)
### Problem
Warn user before leaving page
### Solution
Use `beforeunload` + navigation blocking
***
## 14. Dynamic Layout Switching
### Problem
Different layouts:
* Public
* Dashboard
### Solution
```jsx theme={null}
}>
} />
```
***
## 15. URL Sync with State
### Problem
Keep UI filters in URL
### Solution
Use `useSearchParams`
***
## 16. Preloading Routes
### Problem
Preload dashboard after login
### Solution
```jsx theme={null}
import("./Dashboard");
```
***
## 17. Deep Linking with Nested Routes
### Problem
Open `/dashboard/settings` directly
### Constraint
* Must render full layout
### Solution
Use proper nesting + ``
***
## 18. Route Transition Loading Indicator
### Problem
Show loader during navigation
### Solution
Use `useNavigation()` (data router)
***
# Final Thought
These problems test:
* **Routing architecture design**
* **Real-world constraints**
* **Performance decisions**
* **User experience edge cases**
***
Below are **18 production-grade debugging challenges** focused on React Router.
These are the kinds of issues senior engineers actually debug in real systems — subtle, non-obvious, and rooted in **behavior, architecture, and assumptions**.
***
# React Router — Debugging Challenges (Senior Level)
***
## 1. Nested Route Not Rendering
### Buggy Code
```jsx theme={null}
function Dashboard() {
return Dashboard
;
}
}>
} />
```
### What’s wrong
`Profile` never renders.
### WHY it happens
`` is missing, so child routes have no render target.
### Fix
```jsx theme={null}
function Dashboard() {
return (
Dashboard
);
}
```
### Best Practice
Always think of nested routes as **slots → `` is mandatory**.
***
## 2. Unexpected Route Match
### Buggy Code
```jsx theme={null}
} />
} />
```
### Issue
`/user/settings` sometimes renders ``.
### WHY
Dynamic route (`:id`) may match before static route if misconfigured in older setups or incorrect nesting.
### Fix
Ensure correct structure:
```jsx theme={null}
} />
} />
```
### Best Practice
Group related routes to avoid ambiguity.
***
## 3. Infinite Redirect Loop
### Buggy Code
```jsx theme={null}
function ProtectedRoute({ children }) {
if (!isAuth) return ;
return children;
}
```
Login route:
```jsx theme={null}
} />
```
### Issue
App stuck in redirect loop.
### WHY
Login route is also protected → redirect keeps firing.
### Fix
Do not protect login route.
### Best Practice
Separate **public vs private route trees**.
***
## 4. Navigation Triggering on Every Render
### Buggy Code
```jsx theme={null}
if (!user) {
navigate("/login");
}
```
### Issue
Repeated navigation / flickering
### WHY
Navigation is a side effect inside render → causes loop.
### Fix
```jsx theme={null}
useEffect(() => {
if (!user) navigate("/login");
}, [user]);
```
### Best Practice
Never perform navigation during render.
***
## 5. Lazy Loading Crash
### Buggy Code
```jsx theme={null}
const Dashboard = React.lazy(() => import("./Dashboard"));
} />
```
### Issue
App crashes at runtime.
### WHY
Lazy components require ``.
### Fix
```jsx theme={null}
}>
} />
```
### Best Practice
Wrap route trees with a global Suspense boundary.
***
## 6. Layout Re-rendering Too Often
### Buggy Code
```jsx theme={null}
function Layout() {
console.log("Layout render");
return ;
}
```
### Issue
Layout re-renders on every route change.
### WHY
Parent re-renders due to state/props changes.
### Fix
Memoize heavy components:
```jsx theme={null}
export default React.memo(Layout);
```
### Best Practice
Keep layout components **pure and stable**.
***
## 7. Broken Nested Navigation
### Buggy Code
```jsx theme={null}
Profile
```
Inside `/dashboard`
### Issue
Navigates to `/profile` instead of `/dashboard/profile`
### WHY
Absolute path used
### Fix
```jsx theme={null}
Profile
```
### Best Practice
Use **relative paths inside nested routes**.
***
## 8. Lost State After Navigation
### Buggy Code
```jsx theme={null}
Dashboard
```
### Issue
Full page reload → state lost
### WHY
Native anchor tag bypasses React Router
### Fix
```jsx theme={null}
Dashboard
```
### Best Practice
Never use `` for internal navigation.
***
## 9. Dynamic Param Not Updating
### Buggy Code
```jsx theme={null}
useEffect(() => {
fetchData(id);
}, []);
```
### Issue
Data doesn’t update when URL param changes
### WHY
Missing dependency (`id`)
### Fix
```jsx theme={null}
useEffect(() => {
fetchData(id);
}, [id]);
```
### Best Practice
Treat route params like **reactive state**.
***
## 10. Incorrect 404 Handling
### Buggy Code
```jsx theme={null}
} />
} />
```
### Issue
Dashboard never renders
### WHY
Wildcard placed before specific routes
### Fix
Place `*` last.
***
## 11. Flicker in Protected Routes
### Buggy Code
```jsx theme={null}
if (!user) return ;
```
### Issue
Protected UI flashes briefly
### WHY
Auth state is async
### Fix
```jsx theme={null}
if (loading) return ;
```
### Best Practice
Handle **loading state before redirecting**.
***
## 12. Query Params Not Syncing
### Buggy Code
```jsx theme={null}
const category = "electronics";
```
### Issue
URL doesn’t reflect filter state
### Fix
```jsx theme={null}
setSearchParams({ category });
```
### Best Practice
Keep UI state synced with URL.
***
## 13. Double Fetching on Navigation
### Buggy Code
```jsx theme={null}
useEffect(() => {
fetchData();
}, [location]);
```
### Issue
Extra API calls
### WHY
Location object changes frequently
### Fix
Depend on specific part:
```jsx theme={null}
[location.pathname]
```
***
## 14. Route Not Matching After Refactor
### Buggy Code
```jsx theme={null}
```
But navigating to `/dashboard`
### Issue
Route not matched
### WHY
Missing leading `/` in top-level route
### Fix
```jsx theme={null}
```
***
## 15. Memory Leak on Navigation
### Buggy Code
```jsx theme={null}
useEffect(() => {
fetchData().then(setState);
}, []);
```
### Issue
Warning on fast navigation
### WHY
Component unmounted before promise resolves
### Fix
Abort or cleanup
***
## 16. Modal Route Broken on Refresh
### Buggy Code
```jsx theme={null}
location.state.background
```
### Issue
Modal disappears on refresh
### WHY
State is not persisted
### Fix
Fallback to normal route rendering
***
## 17. Over-Nested Routes Causing Complexity
### Issue
Too many nested `` levels
### WHY
Hard to debug and maintain
### Fix
Flatten where possible
***
## 18. Lazy Loading Waterfall
### Buggy Code
Multiple nested lazy routes
### Issue
Slow navigation
### WHY
Sequential loading
### Fix
Group imports
***
# Final Insight
These bugs test whether a developer understands:
* **Rendering flow (Outlet, nesting)**
* **Routing as state**
* **Async + navigation interplay**
* **Performance implications**
***
Below is a **production-grade set of 19 machine coding problems** focused on React Router.
These are **architectural, real-world scenarios** similar to what senior engineers face in **FAANG-level interviews and production systems**.
***
# React Router — Real-World Machine Coding Problems
***
## 1. Enterprise Dashboard with Multi-Level Nested Routing
### Requirements
* Routes:
* `/dashboard`
* `/dashboard/analytics`
* `/dashboard/users/:id`
* Persistent sidebar + topbar
* Breadcrumbs based on route
### UI Behavior
* Sidebar never re-renders
* Content updates via nested routes
### State/Data Flow
* Global user context
* Route-driven content
### Edge Cases
* Direct access to deep links
* Invalid user ID
### Performance
* Lazy load heavy sections (analytics)
### Architecture
* Layout route (`DashboardLayout`)
* Nested routes with ``
### Approach
1. Create layout with sidebar
2. Use nested routes
3. Generate breadcrumbs from `useLocation`
***
## 2. Role-Based Access Control System (RBAC)
### Requirements
* Roles: `admin`, `editor`, `viewer`
* Route-level permissions
### UI Behavior
* Unauthorized → redirect + message
### State Flow
* Auth context + role
### Edge Cases
* Role changes dynamically
* Token expiration
### Performance
* Avoid re-checking auth on every render
### Architecture
* `ProtectedRoute` with role logic
### Approach
1. Create auth context
2. Wrap routes conditionally
3. Handle fallback UI
***
## 3. E-commerce Product Exploration with Dynamic Routing
### Requirements
* `/products`
* `/products/:category`
* `/products/:category/:productId`
### UI Behavior
* Filters reflected in URL
* Breadcrumb navigation
### State Flow
* Query params + route params
### Edge Cases
* Invalid category/product
* Empty results
### Performance
* Debounce filter updates
### Architecture
* Nested dynamic routes
### Approach
1. Use `useParams` + `useSearchParams`
2. Sync UI with URL
***
## 4. Multi-Step Checkout Flow with Route Guards
### Requirements
* `/checkout/cart`
* `/checkout/address`
* `/checkout/payment`
### UI Behavior
* Cannot skip steps
### State Flow
* Persist form state across routes
### Edge Cases
* Refresh on step 2
* Back navigation
### Performance
* Avoid re-rendering entire form
### Architecture
* Context + nested routes
### Approach
1. Store progress in context
2. Guard routes conditionally
***
## 5. Micro-Frontend Routing Integration
### Requirements
* Host app loads remote modules
* Each module has its own routes
### UI Behavior
* Seamless navigation across modules
### Edge Cases
* Route conflicts
* Version mismatch
### Architecture
* Route delegation + lazy loading
### Approach
1. Use dynamic imports
2. Namespace routes
***
## 6. Modal-Based Routing System (Instagram Style)
### Requirements
* `/feed`
* `/post/:id` (modal over feed)
### UI Behavior
* Background preserved
* Direct URL → full page
### Edge Cases
* Refresh loses modal state
### Architecture
* Dual routing state
### Approach
1. Use `location.state`
2. Fallback rendering
***
## 7. SEO-Friendly Blog with Dynamic Routes
### Requirements
* `/blog`
* `/blog/:slug`
### UI Behavior
* Server-compatible URLs
### Edge Cases
* Invalid slug
* SSR hydration mismatch
### Performance
* Lazy load article content
### Architecture
* Dynamic route + fallback UI
***
## 8. Real-Time Search with URL Sync
### Requirements
* `/search?q=react`
### UI Behavior
* Input updates URL
* Back button restores state
### Edge Cases
* Rapid typing
* Empty query
### Performance
* Debounce API calls
### Architecture
* URL as source of truth
***
## 9. Admin Panel with Dynamic Layout Switching
### Requirements
* Public layout vs admin layout
### UI Behavior
* Layout switches automatically
### Architecture
```jsx theme={null}
} />
} />
```
### Approach
Use layout routes
***
## 10. File Explorer (Nested Dynamic Routes)
### Requirements
* `/files/*`
* Arbitrary depth navigation
### UI Behavior
* Folder navigation via URL
### Edge Cases
* Deep nesting
* Invalid paths
### Architecture
* Wildcard routes
***
## 11. Offline-Aware Routing
### Requirements
* Show offline page when network fails
### UI Behavior
* Retry mechanism
### Edge Cases
* Partial connectivity
### Architecture
* Wrapper route with network detection
***
## 12. Route-Based Feature Flags
### Requirements
* Enable/disable features per route
### Edge Cases
* Flag changes at runtime
### Architecture
* Feature flag context + route guards
***
## 13. Progressive Web App (PWA) Routing
### Requirements
* Offline navigation support
### Edge Cases
* Cache mismatch
### Architecture
* Service worker + routing fallback
***
## 14. Analytics Tracking on Route Change
### Requirements
* Track page views
### Architecture
```jsx theme={null}
useEffect(() => {
track(location.pathname);
}, [location.pathname]);
```
***
## 15. Internationalized Routing (i18n)
### Requirements
* `/en/dashboard`
* `/fr/dashboard`
### Edge Cases
* Missing translations
### Architecture
* Locale-based route prefix
***
## 16. Route-Level Error Boundaries
### Requirements
* Handle errors per route
### Architecture
* Error boundary per layout
***
## 17. Infinite Scroll with Route Preservation
### Requirements
* Preserve scroll on back navigation
### Architecture
* `ScrollRestoration`
***
## 18. Multi-Tenant App Routing
### Requirements
* `/tenantA/dashboard`
* `/tenantB/dashboard`
### Edge Cases
* Tenant switching
### Architecture
* Dynamic base path
***
## 19. Large-Scale Code Splitting Strategy
### Requirements
* Optimize bundle size
### Performance
* Avoid too many chunks
### Architecture
* Feature-based lazy loading
***
# Final Architectural Insight
A senior engineer should think of React Router as:
### 1. URL = State Machine
* URL drives UI, not just navigation
### 2. Routing = Composition Layer
* Layout routes define structure
### 3. Performance Lever
* Lazy loading, code splitting, prefetching
### 4. Control Layer
* Auth, feature flags, experiments
***
Below is a **FAANG-level React Router interview set (19 questions)** designed to test **deep reasoning, architecture decisions, debugging mindset, and performance awareness**.
***
# React Router — Senior Interview Questions
***
## 1. How would you design routing for a large-scale application with multiple teams working independently?
### Follow-up
* How do you avoid route conflicts?
* How do you enable independent deployments?
### Strong Answer
* Use **central route config with modular ownership**
* Feature-based route splitting (each team owns its route subtree)
* Use **lazy loading per feature**
* Namespacing routes (`/admin`, `/payments`)
* Consider **micro-frontend architecture**
### Weak Answer
> “Just define all routes in App.js”
❌ Fails scalability, ownership, and maintainability
***
## 2. Explain how nested routes affect rendering performance.
### Follow-up
* How do you prevent unnecessary re-renders?
### Strong Answer
* Parent layouts re-render when location changes
* Expensive layouts should be memoized
* Avoid passing changing props unnecessarily
* Use **layout routes to isolate rendering**
### Weak Answer
> “Nested routes don’t affect performance”
❌ Ignores React rendering model
***
## 3. How does React Router decide which route to render?
### Follow-up
* What happens with conflicting dynamic and static routes?
### Strong Answer
* Uses **route ranking algorithm**
* Static > dynamic > wildcard
* Builds match tree and selects best match
### Weak Answer
> “It matches top to bottom”
❌ That’s v5 thinking
***
## 4. Design a protected routing system that avoids UI flicker.
### Follow-up
* What if auth is async?
### Strong Answer
* Introduce **loading state**
* Delay rendering until auth resolved
* Use centralized auth context
```jsx theme={null}
if (loading) return ;
```
### Weak Answer
> “Just redirect if not logged in”
❌ Causes flash of protected content
***
## 5. How would you implement route-based code splitting at scale?
### Follow-up
* What are the trade-offs?
### Strong Answer
* Use `React.lazy` + `Suspense`
* Group related routes to avoid too many chunks
* Preload critical routes
### Trade-offs
* Navigation delay vs initial load improvement
### Weak Answer
> “Lazy load everything”
❌ Causes waterfall loading
***
## 6. How do layout routes improve architecture?
### Follow-up
* Compare with HOCs or wrapper components
### Strong Answer
* Layout routes are **route-aware composition**
* Avoid duplication
* Maintain UI hierarchy
### Weak Answer
> “They just wrap components”
❌ Misses structural importance
***
## 7. How would you debug a route that is not rendering?
### Follow-up
* What tools/hooks would you use?
### Strong Answer
* Check:
* Path correctness
* ``
* Route nesting
* `useLocation()`
* Treat routing like state debugging
### Weak Answer
> “Check console logs”
❌ Lacks systematic approach
***
## 8. Explain trade-offs between `BrowserRouter` and `HashRouter`.
### Strong Answer
* BrowserRouter → clean URLs, needs server config
* HashRouter → no server config, poor SEO
### Weak Answer
> “HashRouter is older”
❌ Not about age, about use case
***
## 9. How do you handle dynamic routes with data fetching?
### Follow-up
* What if param changes quickly?
### Strong Answer
* Use `useParams`
* Handle race conditions (abort previous requests)
* Show loading/error states
### Weak Answer
> “Fetch inside component”
❌ Incomplete without lifecycle handling
***
## 10. How do you prevent infinite redirects in protected routes?
### Strong Answer
* Ensure login route is public
* Add guard conditions
* Track redirect origin
### Weak Answer
> “It won’t happen”
❌ Happens often in real apps
***
## 11. How would you design routing for SEO-sensitive applications?
### Strong Answer
* Use SSR (e.g., Next.js or custom setup)
* Ensure proper meta tags per route
### Weak Answer
> “React Router handles SEO”
❌ It doesn’t
***
## 12. How do you manage route state vs global state?
### Strong Answer
* URL = shareable state (filters, pagination)
* Global state = app-wide data (auth)
### Weak Answer
> “Put everything in Redux”
❌ Over-engineering
***
## 13. What are common pitfalls with nested routes?
### Strong Answer
* Missing ``
* Incorrect relative paths
* Over-nesting complexity
### Weak Answer
> “Nothing tricky”
❌ Shows lack of experience
***
## 14. How do you handle modals with routing?
### Strong Answer
* Use `location.state` for background route
* Fallback to full page on refresh
### Weak Answer
> “Use state only”
❌ Breaks deep linking
***
## 15. How would you implement breadcrumbs dynamically?
### Strong Answer
* Use route hierarchy + `useLocation`
* Map segments to labels
### Weak Answer
> “Hardcode breadcrumbs”
❌ Not scalable
***
## 16. What are performance bottlenecks in routing systems?
### Strong Answer
* Large bundles
* Re-rendering layouts
* Lazy loading waterfalls
### Weak Answer
> “Routing is fast”
❌ Ignores real-world scale
***
## 17. How do you structure routes in a micro-frontend architecture?
### Strong Answer
* Each app owns its route subtree
* Use dynamic imports
* Avoid global coupling
### Weak Answer
> “Just merge routes”
❌ Breaks independence
***
## 18. How do query params differ from route params in design?
### Strong Answer
* Route params → identity (resource)
* Query params → filters/state
### Weak Answer
> “They are similar”
❌ Different responsibilities
***
## 19. How do you ensure smooth navigation UX in large apps?
### Strong Answer
* Loading indicators
* Preloading routes
* Optimistic UI
* Scroll restoration
### Weak Answer
> “Just use Link”
❌ Too shallow
***
# Final Evaluation Insight (What Interviewers Look For)
A strong candidate:
* Thinks in **URL → UI mapping**
* Understands **rendering behavior deeply**
* Anticipates **edge cases (auth, async, refresh)**
* Makes **trade-offs explicit**
* Designs for **scale and performance**
***