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.