Client-side routing concept in React - Step-by-Step Execution

Concept Flow - Client-side routing concept

User clicks a link

↓

Intercept click event

↓

Update URL in browser without reload

↓

React Router matches URL to component

↓

Render matched component

↓

Display new page content

↓

Wait for next user interaction

This flow shows how client-side routing intercepts link clicks, updates the URL, and renders components without reloading the page.

Execution Sample

React

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

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

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

This React code sets up client-side routing with a link to an About page that renders without a full page reload.

Execution Table

Step	User Action	Browser URL	React Router Action	Rendered Component	Page Reload
1	Initial load	http://localhost/	Match '/' route (default)	Home or default component	No
2	User clicks 'About' link	http://localhost/about	Match '/about' route	About component	No
3	User clicks browser back	http://localhost/	Match '/' route	Home or default component	No
4	User enters URL manually	http://localhost/contact	Match '/contact' route or 404	Contact or NotFound component	No
5	User refreshes page	http://localhost/contact	Server handles route	Full page reload	Yes

💡 Client-side routing stops reloading pages except on manual refresh or unknown routes.

Variable Tracker

Variable	Initial	After Step 2	After Step 3	After Step 4	Final
currentURL	http://localhost/	http://localhost/about	http://localhost/	http://localhost/contact	http://localhost/contact
renderedComponent	Home or default	About	Home or default	Contact or NotFound	Contact or NotFound
pageReload	false	false	false	false	true (on refresh)

Key Moments - 3 Insights

Why doesn't clicking a Link cause the whole page to reload?

Because React Router intercepts the click event and updates the URL and component rendering internally without triggering a full browser reload, as shown in execution_table step 2.

What happens when the user refreshes the page on a client-side route?

The browser sends a request to the server for that URL, causing a full page reload, unlike client-side navigation. This is shown in execution_table step 5.

How does React Router know which component to show?

It matches the current URL to the defined routes and renders the corresponding component, as seen in execution_table steps 2 and 4.

Visual Quiz - 3 Questions

Look at the execution_table, what component is rendered after the user clicks the 'About' link?

A Home component

B About component

C Contact component

D NotFound component

💡 Hint

Check the 'Rendered Component' column at Step 2 in the execution_table.

At which step does a full page reload occur according to the execution_table?

A Step 5

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the 'Page Reload' column for the step where it says 'Yes'.

If the user manually enters a URL that matches no route, what will React Router do?

A Reload the page

B Render the Home component

C Render the NotFound component

D Show a blank page

💡 Hint

See Step 4 in the execution_table where unmatched routes render NotFound.

Concept Snapshot

Client-side routing lets React apps change pages without reloading.
Use <BrowserRouter> to wrap your app.
Use <Link> to change URL without reload.
<Routes> and <Route> match URL to components.
Browser URL updates but page stays loaded.
Refresh causes full reload from server.

Full Transcript

Client-side routing in React means the app changes what you see without reloading the whole page. When you click a link, React Router catches that click, changes the URL in the browser, and shows the right component. This happens fast because the page does not reload. The flow starts when the user clicks a link, React Router updates the URL, matches it to a component, and renders it. The execution table shows steps like initial load, clicking links, and refreshing. Variables like currentURL and renderedComponent change as you navigate. Key points include why clicking a Link doesn't reload the page, what happens on refresh, and how React Router matches URLs. The quiz checks understanding of which component shows and when reloads happen. Remember, client-side routing improves user experience by avoiding full page reloads.

Practice

1. What is the main purpose of client-side routing in a React application?

easy

A. To handle server-side rendering only

B. To reload the whole page when navigating

C. To change views without reloading the entire page

D. To manage database connections

Solution

1. Step 1: Understand client-side routing

   Client-side routing allows changing the visible content without refreshing the whole page, making navigation faster and smoother.

2. Step 2: Compare options

   Options B, C, and D describe behaviors unrelated to client-side routing in React.

3. Final Answer:

   To change views without reloading the entire page -> Option C

4. Quick Check:

   Client-side routing = change views without reload [OK]

Hint: Client-side routing avoids full page reloads [OK]

Common Mistakes:

• Confusing client-side routing with server-side rendering
• Thinking navigation always reloads the page
• Assuming routing manages backend tasks

2. Which of the following is the correct way to import components for client-side routing in React?

easy

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

B. import { Router, RouteList, Route } from 'react-router';

C. import { BrowserRouter, Route, Link } from 'react-router';

D. import { Router, Routes, Link } from 'react-router-dom';

Solution

1. Step 1: Identify the correct package and components

   The official React routing library is 'react-router-dom' and the main components are BrowserRouter, Routes, and Route.

2. Step 2: Check each import statement

   Only import { BrowserRouter, Routes, Route } from 'react-router-dom'; correctly imports BrowserRouter, Routes, and Route from 'react-router-dom'. Others use incorrect component names or wrong packages.

3. Final Answer:

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

4. Quick Check:

   Correct import = import { BrowserRouter, Routes, Route } from 'react-router-dom'; [OK]

Hint: Remember 'react-router-dom' exports BrowserRouter, Routes, Route [OK]

Common Mistakes:

• Using 'react-router' instead of 'react-router-dom'
• Mixing component names like Router instead of BrowserRouter
• Forgetting to import Routes component

3. Given this React routing code snippet, what will be displayed when the URL path is /about?

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

function App() {
  return (
    
      
        Home} />
        About Us} />
        Contact} />
      
    
  );
}

medium

A. Home

B. About Us

C. Contact

D. Nothing will be displayed

Solution

1. Step 1: Match URL path to Route path

   The URL path '/about' matches the Route with path='/about'.

2. Step 2: Identify the element rendered

   The Route for '/about' renders <h1>About Us</h1>.

3. Final Answer:

   <h1>About Us</h1> -> Option B

4. Quick Check:

   Path '/about' renders About Us [OK]

Hint: Match URL path exactly to Route path [OK]

Common Mistakes:

• Choosing the home route for all paths
• Confusing element props with children
• Assuming multiple routes render simultaneously

4. Identify the error in this React routing setup:

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

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

medium

A. Route components must be inside Routes component

B. BrowserRouter cannot wrap Routes

C. Route elements cannot use JSX components

D. Missing import for Home and About components

Solution

1. Step 1: Check Route placement

   All Route components must be children of a Routes component to work correctly.

2. Step 2: Identify the misplaced Route

   The Route with path='/' is outside the Routes component, which is incorrect.

3. Final Answer:

   Route components must be inside Routes component -> Option A

4. Quick Check:

   Routes wrap Route components [OK]

Hint: Always nest Route inside Routes [OK]

Common Mistakes:

• Placing Route outside Routes component
• Thinking BrowserRouter cannot wrap Routes
• Confusing JSX elements with strings in element prop

5. You want to create a navigation menu that updates the URL and shows the correct page without reloading. Which React Router component should you use for the links?

hard

A. <a> tags with href attribute

B. <button> with onClick calling window.location

C. <NavLink> component but without BrowserRouter

D. <Link> component from react-router-dom

Solution

1. Step 1: Understand navigation in React Router

   The <Link> component updates the URL and renders the new route without reloading the page.

2. Step 2: Evaluate options for SPA navigation

   <a> tags with href attribute causes full page reloads. <button> with onClick calling window.location uses window.location which reloads. <NavLink> component but without BrowserRouter requires BrowserRouter to work properly.

3. Final Answer:

   <Link> component from react-router-dom -> Option D

4. Quick Check:

   Use Link for client-side navigation [OK]

Hint: Use Link, not anchor tags, for SPA navigation [OK]

Common Mistakes:

• Using <a> tags causing full page reload
• Forgetting BrowserRouter wrapper for NavLink
• Using buttons with window.location causing reload