React Router overview - Step-by-Step Execution

Concept Flow - React Router overview

User clicks a link or enters URL

↓

React Router intercepts navigation

↓

Match URL to Route path

React Router watches the URL, matches it to defined routes, and shows the right component without reloading the page.

Execution Sample

React

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

function About() {
  return <h2>About Page</h2>;
}

function App() {
  return (
    <BrowserRouter>
      <nav><Link to="/about">About</Link></nav>
      <Routes>
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

This code sets up React Router with a link to '/about' and a route that shows the About component when URL matches.

Execution Table

Step	Action	URL	Route Match	Component Rendered	Browser URL Update
1	Initial load	/	No match	Default or Home component	/
2	User clicks 'About' link	/	Intercept navigation	No change yet	/
3	React Router matches '/about'	/about	Matches '/about'	Render About component	/about
4	Browser URL updates	/about	Matches '/about'	About component visible	/about
5	User enters unknown URL	/unknown	No match	Render Not Found component	/unknown

💡 Navigation stops when a route matches or Not Found page is shown if no match.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 5
URL	/	/	/about	/unknown
Route Match	No match	Intercept navigation	Matches '/about'	No match
Component Rendered	Home	Home	About	Not Found

Key Moments - 2 Insights

Why doesn't the page reload when clicking a Link?

React Router intercepts the click event (see Step 2) and changes the URL internally without a full page reload, so the app stays fast and smooth.

What happens if the URL does not match any Route?

React Router renders a Not Found component (Step 5) to show the user the page doesn't exist instead of breaking.

Visual Quiz - 3 Questions

Look at the execution table, what component is rendered at Step 3?

A About component

B Home component

C Not Found component

D No component

💡 Hint

Check the 'Component Rendered' column at Step 3 in the execution table.

At which step does React Router update the browser URL to '/about'?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look at the 'Browser URL Update' column to see when the URL changes.

If the user enters '/contact' which is not defined, what will React Router do?

A Render About component

B Render Home component

C Render Not Found component

D Reload the page

💡 Hint

See Step 5 in the execution table for behavior on unknown URLs.

Concept Snapshot

React Router watches the URL and shows matching components.
Use <BrowserRouter> to enable routing.
Define routes with <Routes> and <Route path="" element={}/>
Use <Link> to navigate without page reload.
If no route matches, show a Not Found page.
This keeps your app fast and smooth.

Full Transcript

React Router is a tool for React apps that lets you change what is shown on the page based on the URL without reloading the whole page. When a user clicks a link or types a URL, React Router checks if it matches any route you set up. If it matches, it shows the right component. If not, it shows a Not Found page. This process happens inside the app, so navigation feels fast and smooth. You use components like BrowserRouter to wrap your app, Routes to hold route definitions, Route to define each path and component, and Link to create clickable links that change the URL without reloading.

Practice

1. What is the main purpose of React Router in a React application?

easy

A. To style React components with CSS

B. To create multiple pages without reloading the browser

C. To manage state across components

D. To fetch data from APIs

Solution

1. Step 1: Understand React Router's role

   React Router helps build apps with multiple pages by changing views without full page reloads.

2. Step 2: Compare with other options

   Styling, state management, and data fetching are handled by other tools, not React Router.

3. Final Answer:

   To create multiple pages without reloading the browser -> Option B

4. Quick Check:

   React Router = multi-page navigation without reload [OK]

Hint: React Router = multi-page navigation without full reload [OK]

Common Mistakes:

• Confusing React Router with CSS or styling tools
• Thinking React Router manages data fetching
• Assuming React Router handles state management

2. Which of the following is the correct way to wrap your app with React Router for browser-based routing?

easy

A. <BrowserRouter>...</BrowserRouter>

B. <Link>...</Link>

C. <Route>...</Route>

D. <Router>...</Router>

Solution

1. Step 1: Identify the main router component

   For browser history routing, React Router uses BrowserRouter to wrap the app.

2. Step 2: Understand other components

   Route defines pages, Link creates navigation links, and Router alone is not a valid component.

3. Final Answer:

   <BrowserRouter>...</BrowserRouter> -> Option A

4. Quick Check:

   BrowserRouter wraps app for browser routing [OK]

Hint: Wrap app with <BrowserRouter> for browser routing [OK]

Common Mistakes:

• Using <Router> instead of <BrowserRouter>
• Confusing <Route> with the router wrapper
• Wrapping app with <Link> which is for navigation

3. Given this React Router setup, what will be rendered when the URL path is /about?

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element=<Home /> />
        <Route path='/about' element=<About /> />
      </Routes>
    </BrowserRouter>
  );
}

medium

A. The component

B. Nothing renders because of missing default route

C. Both and components

D. The component

Solution

1. Step 1: Match URL path with Route path

   The URL /about matches the route with path='/about', so <About /> renders.

2. Step 2: Understand route exclusivity

   Only the matching route's element renders; <Home /> renders only at /.

3. Final Answer:

   The <About /> component -> Option D

4. Quick Check:

   URL '/about' renders About component [OK]

Hint: URL path matches Route path exactly to render component [OK]

Common Mistakes:

• Thinking both components render simultaneously
• Assuming missing default route breaks rendering
• Confusing '/' path with '/about'

4. Identify the error in this React Router code snippet:

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

function App() {
  return (
    <BrowserRouter>
      <Route path='/' element=<Home /> />
      <Routes>
        <Route path='/about' element=<About /> />
      </Routes>
    </BrowserRouter>
  );
}

medium

A. <Route> must be inside <Routes>

B. Missing closing tag for <BrowserRouter>

C. The <Route> for '/' should not have an element prop

D. Cannot use <Route> and <Routes> together

Solution

1. Step 1: Check component nesting rules

   In React Router, all <Route> components must be children of <Routes>.

2. Step 2: Identify incorrect placement

   The <Route path='/' ... /> is outside <Routes>, which is invalid.

3. Final Answer:

   <Route> must be inside <Routes> -> Option A

4. Quick Check:

   Routes wrap Route components [OK]

Hint: Always put <Route> inside <Routes> component [OK]

Common Mistakes:

• Placing <Route> outside <Routes>
• Thinking <Route> can be used alone
• Confusing element prop usage

5. You want to create a navigation menu that changes the URL without reloading the page. Which React Router component should you use, and why? Choose the best option.

hard

A. Use <Route> because it defines the navigation links

B. Use <a> tags because they are standard HTML links

C. Use <Link> because it updates the URL and renders the new page without reload

D. Use <BrowserRouter> because it creates the navigation menu

Solution

1. Step 1: Identify component for navigation links

   <Link> is designed to change the URL and render new pages without reloading.

2. Step 2: Compare with other options

   <a> causes full page reload, <Route> defines pages, and <BrowserRouter> wraps the app but does not create links.

3. Final Answer:

   Use <Link> because it updates the URL and renders the new page without reload -> Option C

4. Quick Check:

   Use Link for smooth navigation without reload [OK]

Hint: Use <Link> for navigation to avoid full page reload [OK]

Common Mistakes:

• Using <a> tags causing full reload
• Confusing <Route> with navigation links
• Thinking <BrowserRouter> creates menus