Navigation links in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a navigation link using React Router.

React

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

function Nav() {
  return <Link to=[1]>Home</Link>;
}

Drag options to blanks, or click blank then click option'

A"/home"

B"home"

C"/"

D"index"

Attempts:

3 left

💡 Hint

Common Mistakes

Using a path without a leading slash

Using a relative path without quotes

The to prop in Link specifies the path. The root path is "/".

2fill in blank

medium

Complete the code to add a navigation link to the About page.

React

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

function Nav() {
  return <Link to=[1]>About</Link>;
}

Drag options to blanks, or click blank then click option'

A"/about"

B"/About"

C"about/"

D"about"

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the leading slash

Capitalizing the path incorrectly

The path should start with a slash and be lowercase for consistency: "/about".

3fill in blank

hard

Fix the error in the navigation link to correctly navigate to the Contact page.

React

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

function Nav() {
  return <Link to=[1]>Contact</Link>;
}

Drag options to blanks, or click blank then click option'

A"contact"

B"/contact"

C"/Contact"

Dcontact

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the path

Using uppercase letters in the path

The to prop must be a string starting with a slash to define the path correctly.

4fill in blank

hard

Fill both blanks to create navigation links for Home and Profile pages.

React

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

function Nav() {
  return (
    <nav>
      <Link to=[1]>Home</Link>
      <Link to=[2]>Profile</Link>
    </nav>
  );
}

Drag options to blanks, or click blank then click option'

A"/"

B"/profile"

C"profile"

D"home"

Attempts:

3 left

💡 Hint

Common Mistakes

Using relative paths without slashes

Mixing uppercase and lowercase in paths

The Home link uses the root path "/", and the Profile link uses "/profile".

5fill in blank

hard

Fill all three blanks to create navigation links for Dashboard, Settings, and Logout pages.

React

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

function Nav() {
  return (
    <nav>
      <Link to=[1]>Dashboard</Link>
      <Link to=[2]>Settings</Link>
      <Link to=[3]>Logout</Link>
    </nav>
  );
}

Drag options to blanks, or click blank then click option'

A"/dashboard"

B"/settings"

C"/logout"

D"dashboard"

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the leading slash

Using uppercase letters in paths

Each link's to prop should be a string starting with a slash for the correct path.