Setting up React Router
Before we use the components of React Router we need to set up its environment. To do this we need to import a top-level component and wrap our root component in it. To achieve this, BrowserRouter is used. 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>
);
import {BrowserRouter, Routers, Route} from "react-router-dom"
import Home from "./components/Home"
import Login from "./components/Login"
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={ <Home />} />
<Route path="/login" element = { <Login/> } />
// other routes
</Routes>
</BrowserRouter>
)
}
export default App;
Navigate Component in React Router
The navigate component is among the built-in components shipped in with React router version 6. It is a component similar to the useNavigate hook. Internally it uses useNavigate to redirect the location. The props passed to Navigate are the same as the arguments passed to the function returned by useNavigate.
While functional components in React support hooks, ES6 classes do not. Hence, when dealing with class-based React components, Navigate serves as a convenient alternative to useNavigate.
In this article, we are going to dive deeper into the Navigate component and how to efficiently use it to our advantage.
Table of Content
- Setting up React Router
- Using the Navigate Component
- Example of Navigate Component
Now, go to the folder that houses the react project and install the react-router-dom package using the following command in the terminal:
# Using NPM
npm install react-router-dom@6
# Using Yarn
yarn add react-router-dom@6
# Using pnpm
pnpm add react-router-dom@6