In this article, we will look at how you can redirect a user from a restricted page to a login page. We will also discuss how you can return the user back to the page they were on after logging in.
In React Router v6, there are two ways you can use to redirect a user — the Navigate component and the useNavigate() hook.
Create a React Application
Create a simple React application using the create-react-app command. You will use this application to test out how the Navigate component and the useNavigate() hook work.
Create a Login Page
You will need to create a Login page to authenticate users. Since this is not an authentication tutorial, use an array of objects as the user database.
Create a new file in the src folder and name it Login.js. Then add the following code, to create the login form.
This is a simple login form. When a user submits their username and password, they are checked against the array. If these details are correct, the authenticated state is set to true. Since you will be checking if the user is authenticated in the Dashboard component, you also need to store the authentication status somewhere that can be accessed by other components. This article uses local storage. In a real application, using React context would be a better choice.
Create a Dashboard Page
Add the following code in a new file called Dashboard.js.
The dashboard should only be accessible to authenticated users only. Therefore, when users visit the dashboard page, first check whether they are authenticated. If they are not, redirect them to the login page.
To do this, set up the application routes first using React router.
In index.js, set up the routing for your application.
Protect the Dashboard Page
Now that your application routes are set up, the next step is to make the dashboard route private. When the Dashboard component loads, the authentication state is retrieved from the local storage and stored in the state. If the user is not authenticated, the application will redirect to the login page otherwise it will display the dashboard page.
Redirect User to Login Page Using Navigate
The Navigate component replaced the Redirect component that was used in React Router v5. Import Navigate from react-router-dom.
To redirect unauthenticated users, use it as follows.
The Navigate component is a declarative API. It relies on a user event, which in this case is authentication to cause a state change and consequently cause a component re-render. Note that you don’t have to use the replace keyword. Using it replaces the current URL instead of pushing it to the browser’s history.
Redirect User to Another Page Using useNavigate()
The other option for performing redirects in React is the useNavigate() hook. This hook provides access to the navigate imperative API. Start by importing it from react-router-dom.
Redirect once the user is successfully authenticated in the handleSubmit() function like this:
In this example, once the user submits the form with the correct details, they are redirected to the dashboard.
Routing in React
In this article, you learned how you can redirect a user to another page in React using both the Navigate component and the useNavigate() hook. The article used a Login form to demonstrate how you can redirect unauthenticated users from a protected page to the login page.
