Skip to main content
Post image
ยท 4 min read

Redirect in React Router V6 with Navigate Component

Introductionโ€‹

React Router version 6 shipped recently with several new features and improvements. One such feature is the Navigate component. It is the component equivalent of the useNavigate hook.

This article will take a deep dive into the Navigate component.

Steps we'll cover:

Prerequisitesโ€‹

To run the examples in this article, you need to have some following.

  • A working React project. Quickly create a React project using superplate.

Getting started with React routerโ€‹

In this section, you will learn how to set up React router in an existing React project.

Installing React routerโ€‹

Depending on your package manager, install React router from the NPM package registry using one of the commands below.

# Using NPM
npm install react-router-dom@6

# Using Yarn
yarn add react-router-dom@6

# Using pnpm
pnpm add react-router-dom@6

Setting up React routerโ€‹

Before using React router in the browser environment, import one of the top-level Components and wrap your root Component in it. We will use BrowserRouter since we want to run React router in the browser. It is the recommended way for running React router in the browser.

If you are using React router version 6, wrap your root component in BrowserRouter as in the example below.

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter as Router } from "react-router-dom";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>
);

Setting up routesโ€‹

In React router version 6, you can use the Routes and Route Components to set up the routes in your application. You can import and use them like so:

import { Route, Routes } from "react-router-dom";
import { Home, Blog } from "./components"

function App() {
return (
<div className="App">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/blog" element={<Blog />} />
</Routes>
</div>
);
}


How to use the Navigate componentโ€‹

The Navigate component is one of the several built-in components in React router version 6. It is a wrapper for the useNavigate hook, and the current location changes when you render it.

import { Navigate } from "react-router-dom";

Import Navigate from react-router-dom to start using it. The Navigate component takes up to three props, only one of which is required. The other two are optional.

Below are the explanations for these three props.

<Navigate to="/dashboard" state={{ todos: []}} replace={true} />
  • to - A required prop. Its value should be the path which you want to navigate.
  • replace - An optional boolean prop. Setting its value to true will replace the current entry in the history stack.
  • state - An optional prop. You can use it to pass data from the component that renders Navigate.

The code below illustrates how you can use the Navigate component for navigation. We are rendering it conditionally after a state update and using the state prop to pass a route state.

const App = () => {
const [loginDetails, setLoginDetails] = useState({ email: "", password: "" });
const [user, setUser] = useState(null);

const changeHandler = (e) => {
const { name, value } = e.target;
setLoginDetails((loginDetails) => ({ ...loginDetails, [name]: value }));
};

const submitHandler = async (e) => {
e.preventDefault();
const user = await loginUser(loginDetails);
setUser(user);
};

return (
<div>
<form onSubmit={submitHandler}>
<label>
Email:
<input
type="email"
name="email"
value={loginDetails.email}
onChange={changeHandler}
required
/>
</label>
<label>
Password:
<input
type="password"
name="password"
value={loginDetails.password}
onChange={changeHandler}
required
/>
</label>
<button type="submit"> Login </button>
</form>
{user && <Navigate to="/dashboard" state={user} replace={true} />}
</div>
);
};

After navigation, the component rendered by the matching route can access the state prop passed to Navigate using the useLocation hook like so:

const location = useLocation();
console.log(location.state);
// The default value of location.state is null if you don't pass any data.

The props you pass to the Navigate component are the same as the arguments required by the function returned by the useNavigate hook.


discord banner

Conclusionโ€‹

Navigate component is one of the built-in components that shipped with React router version 6. It is a React component equivalent of the useNavigate hook. It uses useNavigate internally. The props you pass to Navigate are the same as the arguments you pass to the function returned by useNavigate.

Unlike functional components in React, ES6 classes do not support hooks. Therefore, Navigate is a handy equivalent of useNavigate when working with class-based React components.



Related Articles

Frontend Developer
We are going back to 1995! The perfect harmony of Modern stack and Win95
ยท 15 min read
Frontend Developer
How to Create Full Stack React/Next.JS Web App in Few Hour
ยท 9 min read
Frontend Developer
Develop your Own Customizable Invoice Generator with Refine and Strapi | Part I
ยท 12 min read

From Same Author

Web Developer
How to use the useParams hook in React Router
ยท 5 min read
Web Developer
Using Google Lighthouse to improve app performance
ยท 16 min read
Web Developer
Top 6 Free Online Code Editors and IDEs with Pros and Cons
ยท 17 min read