Navigation links in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of navigation links in a React app?

Navigation links let users move between different parts of the app without reloading the page. They help create a smooth and fast user experience.

beginner

Which React library is commonly used to create navigation links?

React Router is the most popular library for handling navigation links and routing in React apps.

beginner

How do you create a navigation link using React Router?

Use the <Link to="/path">Text</Link> component from React Router. It changes the URL and shows the new page without reloading.

intermediate

Why should navigation links use semantic HTML and ARIA labels?

Semantic HTML and ARIA labels help screen readers and assistive devices understand the links. This makes the app accessible to all users.

intermediate

What is the difference between <a> tags and React Router's <Link> component?

The <a> tag reloads the whole page when clicked. React Router's <Link> changes the URL and updates the page content without reloading, making navigation faster.

Which React Router component is used to create navigation links?

A <Route>

B <Link>

C <Switch>

D <NavLink>

The component creates navigation links that update the URL without reloading the page.

What happens when you click a React Router <Link>?

A The browser opens a new tab

B The page reloads completely

C Nothing happens

D The URL changes and content updates without reload

React Router changes the URL and updates the page content without a full reload.

Why use ARIA labels on navigation links?

A To help screen readers describe the links

B To make links look colorful

C To speed up navigation

D To improve SEO rankings

ARIA labels help screen readers understand the purpose of links, improving accessibility.

Which HTML element is best for navigation links in React apps?

A <div>

B <a>

C <Link>

D <span>

React Router's component is best because it handles navigation without page reloads.

What is a benefit of using React Router for navigation?

A It allows navigation without page reloads

B It disables navigation links

C It reloads the entire page faster

D It only works with class components

React Router enables smooth navigation by updating the URL and content without reloading the page.

Explain how navigation links work in a React app using React Router.

Think about how clicking a link updates the page without refreshing.

Describe why accessibility is important for navigation links and how to improve it.

Consider users who rely on assistive technology.

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