Setting up React Router

Using the Navigate Component:

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.

JavaScript

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>
);

JavaScript

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

Tags:

#ReactJS-Router #ReactJS #Web Technologies

Using the Navigate Component:

Setting up React Router

Navigate Component in React Router

Similar Reads