Learn

In the previous exercise, you learned how to redirect declaratively by rendering a Navigate component that updates the browser’s current location. Though this approach follows React Router’s declarative coding style, it does introduce a few extra steps in the React rendering lifecycle:

The Navigate component must be returned.
The Navigate component is then rendered.
The URL is updated.
And finally the appropriate route is rendered.

React Router also provides a mechanism for updating the browser’s location imperatively using the useNavigate hook.

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

The useNavigate() function returns a navigate function that allows us to specify a path where we’d like to navigate.

Consider this example which immediately triggers a redirect back to the / page after a user successfully submits a <form>:

import { useNavigate } from `react-router-dom`;

export const ExampleForm = () => {

  const navigate = useNavigate()

  const handleSubmit = e => {
    e.preventDefault();
    navigate('/')
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* form elements */ }
    </form>
  )
}

By enabling imperative updates to the browser location, the navigate function allows you to respond immediately to user input without having to wait.

The useNavigate() function also gives us the ability to programmatically navigate our users through their history stack. Scenarios like enabling users to go forward or backward in an application, or redirecting users to their previous page after they’ve logged in, are great use cases for this functionality. To navigate a user through their history stack using useNavigate(), we’d pass in an integer to indicate where in the history we’d like to travel. A positive integer navigates forward and a negative integer navigates backward.

For example:

navigate(-1) - navigate to the previous URL in the history stack.
navigate(1) - navigate to the next URL in the history stack.
navigate(-3) - navigate 3 URLs back in the history stack.

Below, we can see how the navigate() function is used to enable a “Go Back” button:

import { useNavigate } from `react-router-dom`

export const BackButton = () => {
  const navigate = useNavigate()

  return (
    <button onClick={() => navigate(-1)}>
      Go Back
    </button>
  )
}

Let’s practice using useNavigate to give our users the ability to navigate backward and forward no matter where they are in our application.

Instructions

Task 1

So far, you may have noticed the “Back” and “Forward” buttons in the Footer component. However, if you try clicking on them, nothing will happen. Let’s fix that using the navigate hook.

First, navigate to Footer.js and import the useNavigate hook.

Hint

Use the named import syntax to import the useNavigate method from 'react-router-dom':

import { value } from 'package-name';

Task 2

Next, inside the Footer component, call useNavigate() to get the navigate function.

Hint

Your code should look like this:

const navigate = useNavigate();

Task 3

Finally, modify the goBack and goForward click handlers such that they imperatively redirect the user.

Verify your work by navigating to a few URLs and then using the “Back” and “Forward” buttons in the footer.

Hint

Call navigate with a negative integer to go back 1 URL and a positive integer to go forward 1 URL.

Task 4

Lastly, let’s add an imperative redirect to the SignUp component such that after a user submits their username they are redirected to the /profile page.

Navigate to SignUp.js and import the useNavigate hook.

Then, use the navigate function to redirect the user to '/profile' at the end of the handleSubmit method.

Test that your code works by signing up and ensuring that you are redirected to the profile page (which you can now view since loggedIn is now true).

Hint

Import the useNavigate hook from react-router-dom and use navigate() with a path like '/profile'.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?