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'
.