Navigation links in React - Step-by-Step Execution

Concept Flow - Navigation links

User clicks a link

↓

React intercepts click

↓

Prevent full page reload

↓

Update URL in browser

↓

React Router matches new route

↓

Render new component

↓

User sees new page content

This flow shows how clicking a navigation link in React updates the URL and renders new content without reloading the whole page.

Execution Sample

React

import { Link } from 'react-router-dom';

function Nav() {
  return <nav><Link to='/about'>About</Link></nav>;
}

A simple React component rendering a navigation link to the About page using React Router's Link.

Execution Table

Step	Action	Event	State Before	State After	Rendered Output
1	Render Nav component	None	URL: '/' (home)	URL: '/' (home)	<nav><a href='/about'>About</a></nav>
2	User clicks 'About' link	Click event on Link	URL: '/' (home)	URL: '/about'	No full page reload
3	React Router intercepts click	Prevent default browser reload	URL: '/'	URL: '/about'	React matches '/about' route
4	React renders About component	Route change	Rendered: Home page	Rendered: About page	<About /> component shown
5	User sees About page content	Render complete	Home page visible	About page visible	Page content updated
6	User clicks browser back	Popstate event	URL: '/about'	URL: '/'	React renders Home component
7	User sees Home page again	Render complete	About page visible	Home page visible	Page content updated
8	Exit	No more navigation	URL: '/'	URL: '/'	Navigation ends

💡 User stops navigation or closes app; React Router manages URL and content without full reloads.

Variable Tracker

Variable	Start	After Step 2	After Step 4	After Step 6	Final
URL	'/'	'/about'	'/about'	'/'	'/'
Rendered Component	Home	Home	About	Home	Home
Page Content Visible	Home page content	Home page content	About page content	Home page content	Home page content

Key Moments - 3 Insights

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

React Router's Link intercepts the click event and prevents the browser's default reload behavior, as shown in execution_table step 3.

How does React know which component to show after clicking a link?

React Router matches the new URL to a route and renders the corresponding component, demonstrated in execution_table step 4.

What happens when the user clicks the browser back button?

React Router listens to URL changes and re-renders the matching component without reloading the page, as seen in steps 6 and 7.

Visual Quiz - 3 Questions

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

A '/contact'

B '/'

C '/about'

D '/home'

💡 Hint

Check the 'State After' column at Step 2 in the execution_table.

At which step does React Router prevent the full page reload?

A Step 3

B Step 1

C Step 5

D Step 7

💡 Hint

Look for the step mentioning 'Prevent default browser reload' in the execution_table.

If the user clicks the browser back button, what component is rendered according to variable_tracker?

A About component

B Home component

C Contact component

D 404 Not Found

💡 Hint

Check the 'Rendered Component' values after Step 6 in variable_tracker.

Concept Snapshot

Navigation links in React use React Router's Link component.
Clicking a Link updates the URL without reloading the page.
React Router matches the URL to render the correct component.
Browser back/forward buttons update content via React Router.
This creates smooth, fast navigation like a single-page app.

Full Transcript

This visual execution shows how React navigation links work using React Router. When the Nav component renders, it shows a Link to the About page. Clicking this link triggers a click event intercepted by React Router, which prevents the browser from reloading the page. Instead, React Router updates the URL to '/about' and renders the About component. The user sees the new page content instantly. If the user clicks the browser back button, React Router detects the URL change back to '/' and renders the Home component again without reloading. Variables like URL and rendered component update step-by-step, showing how React manages navigation smoothly.