Programmatic navigation (useRouter) in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is useRouter in Next.js?

useRouter is a React hook provided by Next.js that lets you access the router object. It helps you navigate pages programmatically and get info about the current route.

beginner

How do you navigate to a new page using useRouter?

<p>You call <code>router.push('/path')</code> where <code>router</code> is the object from <code>const router = useRouter()</code>. This changes the page to the given path.</p>

intermediate

What is the difference between router.push() and router.replace()?

router.push() adds a new entry in the browser history, so users can go back. router.replace() changes the page without adding a new history entry, replacing the current one.

intermediate

How can you pass query parameters when navigating programmatically with useRouter?

You can pass an object to router.push() like router.push({ pathname: '/search', query: { q: 'books' } }). This adds ?q=books to the URL.

beginner

Why use programmatic navigation instead of <Link> in Next.js?

Programmatic navigation is useful when you want to navigate after an event like form submission or button click, where you need to run code before changing pages.

Which hook do you use in Next.js for programmatic navigation?

A useLink

B useNavigate

C useHistory

D useRouter

useRouter is the Next.js hook for navigation. The others are from different libraries or don't exist.

What does router.push('/about') do?

A Reloads the current page

B Navigates to the /about page and adds to browser history

C Navigates to /about but replaces current history entry

D Does nothing

router.push() navigates and adds a new history entry so users can go back.

How do you replace the current page without adding a new history entry?

A router.replace('/newpage')

B router.push('/newpage')

C router.goBack()

D router.reload()

router.replace() changes the page and replaces the current history entry.

How to add query parameters when navigating with useRouter?

A router.query({ q: 'books' })

B router.push('/search?q=books')

C router.push({ pathname: '/search', query: { q: 'books' } })

D router.navigate('/search', { q: 'books' })

Passing an object with pathname and query is the recommended way to add query parameters.

When is programmatic navigation preferred over using <Link>?

A After an event like form submission

B For static links in navigation menus

C When you want to reload the page

D Never, <code>&lt;Link&gt;</code> is always better

Programmatic navigation is useful when you want to run code before navigating, like after submitting a form.

Explain how to use useRouter to navigate to a new page with query parameters in Next.js.

Think about how to pass both the page path and extra info in the URL.

Describe the difference between router.push() and router.replace() in Next.js navigation.

Consider how browser back button behaves after each method.