Programmatic navigation (useRouter) in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the hook needed for navigation in Next.js.

NextJS

import { [1] } from 'next/navigation';

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

AuseEffect

BuseState

CuseRouter

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Importing hooks like useState or useEffect instead of useRouter.

The useRouter hook from next/navigation is used for programmatic navigation in Next.js.

2fill in blank

medium

Complete the code to get the router object inside a functional component.

NextJS

const router = [1]();

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

AuseState

BuseRouter

CuseEffect

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Calling useState or useEffect instead of useRouter.

Calling useRouter() inside a component returns the router object for navigation.

3fill in blank

hard

Fix the error in the code to navigate to '/about' page on button click.

NextJS

function GoToAbout() {
  const router = useRouter();
  return (
    <button onClick={() => router.[1]('/about')}>Go to About</button>
  );
}

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

Apush

BpushTo

CgoTo

Dnavigate

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect method names like navigate or goTo.

The correct method to navigate programmatically is router.push().

4fill in blank

hard

Fill both blanks to create a button that navigates to '/contact' page using the router.

NextJS

function ContactButton() {
  const router = [1]();
  return (
    <button onClick={() => router.[2]('/contact')}>Contact Us</button>
  );
}

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

AuseRouter

BuseState

Cpush

Dnavigate

Attempts:

3 left

💡 Hint

Common Mistakes

Using useState instead of useRouter.

Using 'navigate' instead of 'push'.

You need to call useRouter() to get the router, then use router.push() to navigate.

5fill in blank

hard

Fill all three blanks to create a component that navigates to a dynamic page '/profile/[id]' with id '123'.

NextJS

function ProfileButton() {
  const router = [1]();
  const userId = '123';
  return (
    <button onClick={() => router.[2](`/profile/$[3]`)}>
      Go to Profile
    </button>
  );
}

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

AuseRouter

Bpush

CuserId

Dnavigate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'navigate' instead of 'push'.

Not using the variable for id in the URL.

Use useRouter() to get the router, router.push() to navigate, and pass the userId variable in the URL.