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.

Practice

1. What is the main purpose of using Link from react-router-dom in a React app?

easy

A. To create navigation links that change pages without reloading the browser

B. To style buttons with CSS

C. To fetch data from an API

D. To manage component state

Solution

1. Step 1: Understand the role of Link

   Link is used to navigate between pages in a React app without refreshing the whole page.

2. Step 2: Compare with other options

   Options A, C, and D describe unrelated tasks like styling, data fetching, and state management, which Link does not handle.

3. Final Answer:

   To create navigation links that change pages without reloading the browser -> Option A

4. Quick Check:

   Navigation without reload = B [OK]

Hint: Remember: <Link> changes pages without full reload [OK]

Common Mistakes:

• Confusing <Link> with HTML <a> tag behavior
• Thinking <Link> manages data or state
• Assuming <Link> reloads the page

2. Which of the following is the correct syntax to create a navigation link to '/about' using react-router-dom?

easy

A. About

B. About

C. About

D. About

Solution

1. Step 1: Identify correct attribute for Link

   The Link component uses the to attribute to specify the path.

2. Step 2: Differentiate from HTML anchor tag

   HTML a tags use href, but Link requires to. About uses correct syntax.

3. Final Answer:

   <Link to='/about'>About</Link> -> Option C

4. Quick Check:

   Link uses to attribute [OK]

Hint: Use 'to' with <Link>, 'href' with <a> [OK]

Common Mistakes:

• Using href instead of to with <Link>
• Using to attribute on <a> tag
• Mixing <Link> and <a> syntax

3. Given this React code snippet, what will be rendered on the page?

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

function Nav() {
  return (
    <nav>
      <Link to='/'>Home</Link>
      <Link to='/profile'>Profile</Link>
    </nav>
  );
}

medium

A. An error because <Link> cannot be used inside <nav>

B. Two clickable links labeled 'Home' and 'Profile' that navigate without page reload

C. Buttons that submit a form

D. Plain text 'Home' and 'Profile' with no navigation

Solution

1. Step 1: Analyze the JSX structure

   The component returns a <nav> element containing two <Link> components with paths '/' and '/profile'.

2. Step 2: Understand Link behavior

   Link renders as clickable links that navigate client-side without reloading the page.

3. Final Answer:

   Two clickable links labeled 'Home' and 'Profile' that navigate without page reload -> Option B

4. Quick Check:

   Links inside nav render clickable navigation [OK]

Hint: Links inside nav create clickable navigation [OK]

Common Mistakes:

• Thinking <Link> renders plain text
• Assuming <Link> causes page reload
• Believing <Link> cannot be inside <nav>

4. What is wrong with this React navigation code?

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

function Menu() {
  return (
    <nav>
      <Link href='/dashboard'>Dashboard</Link>
    </nav>
  );
}

medium

A. No import statement for React

B. Missing closing tag for <nav>

C. Link component cannot be used inside <nav>

D. Using 'href' instead of 'to' on <Link> causes navigation failure

Solution

1. Step 1: Check attribute usage on Link

   The Link component requires the to attribute, not href.

2. Step 2: Verify other code parts

   The <nav> tag is properly closed, and Link can be inside nav. React import is not mandatory in React 17+ for JSX.

3. Final Answer:

   Using 'href' instead of 'to' on <Link> causes navigation failure -> Option D

4. Quick Check:

   Link needs 'to', not 'href' [OK]

Hint: Use 'to' with <Link>, not 'href' [OK]

Common Mistakes:

• Using href attribute on <Link>
• Thinking <Link> can't be inside <nav>
• Assuming React import is always required

5. You want to create a navigation menu with links that have accessible names and keyboard focus. Which approach is best in React using react-router-dom?

hard

A. Use <nav> with <Link> components, add aria-label on nav, and ensure links have descriptive text

B. Use <div> with <Link> components and no ARIA labels

C. Use <nav> with <a> tags and href attributes for navigation

D. Use buttons with onClick handlers instead of links for navigation

Solution

1. Step 1: Choose semantic HTML for navigation

   The <nav> element is the correct semantic container for navigation links, improving accessibility.

2. Step 2: Use Link with descriptive text and ARIA labels

   Link components from react-router-dom provide client-side navigation. Adding aria-label on nav helps screen readers understand the menu purpose.

3. Step 3: Avoid incorrect elements

   Using div or buttons for navigation is less semantic and harms accessibility. Using a tags with href reloads pages, not client-side navigation.

4. Final Answer:

   Use <nav> with <Link> components, add aria-label on nav, and ensure links have descriptive text -> Option A

5. Quick Check:

   Semantic nav + Link + ARIA = A [OK]

Hint: Use semantic nav + Link + aria-label for accessible navigation [OK]

Common Mistakes:

• Using div instead of nav for navigation
• Skipping aria-label for screen readers
• Using buttons instead of links for navigation