How to Redirect Page in React 18 using React Router DOM v6

Last Updated on March 4, 2024 by Digamber in React JS

In this informative article, we will learn how to redirect to desired page or component in React js application using router dom api.

React Router DOM is a handy library that makes the client-side navigation possible in React js application.

The current version of router DOM is version 6, packed with powerful and convenient features. It offers many APIs that help you manage the routing in React environment.

In this tutorial, we are going to shed light on Navigate api of Router dom.

A Navigate element changes the current location when it is rendered. It’s a component wrapper around useNavigate and obtains all the same arguments as props.

How to Redirect to Page with React Router in React App

• Step 1: Download React Project
• Step 2: Add React Router DOM Library
• Step 3: Create Component Files
• Step 4: Integrate Browser Router API
• Step 5: Redirect to Page in React
• Step 6: Run App on Browser

Download React Project

Your system must be ready for react app development, the first step is to install the create-react-app tool:

npm install create-react-app --global

Execute the suggested command to download a new react application:

npx create-react-app react-demo

You can use the give command to enter into the project folder:

cd react-demo

Add React Router DOM Library

Routing can be set in react with router Dom library, we can use the provided command to install React Router DOM version 6:

npm install react-router-dom@6 --legacy-peer-deps

Create Component Files

In the src/ directory you need to create the components/ directory. Then create the Home.js file:

import React from 'react'

function Home() {
  return (
    <div>Home</div>
  )
}

export default Home

Next, in the components/ folder, make another file named Product.js file:

import React from 'react'

function Product() {
  return (
    <div>Product</div>
  )
}

export default Product

Integrate Browser Router API

Next, in the index.js file we need to add the BrowserRouter api, make sure to wrap the App component using BrowserRouter service.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

import { BrowserRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
)

BrowserRouter is the recommended interface for running React Router in a web browser. A BrowserRouter stores the current location in the browser’s address bar using clean URLs and navigates using the browser’s built-in history stack.

Redirect to Page in React

Now, you must import the Routes, Route, NavLink, and Navigate services from the ‘react-router-dom’ package; define the routes.

As you can see, we used the Navigate api, which will redirect to the route that we passed to the to=”” attribute.

Go to App.js file then add the offered code within the file.

import * as React from 'react'
import { Routes, Route, NavLink, Navigate } from 'react-router-dom'

import Home from './components/Home'
import Product from './components/Product'

const App = () => {
  return (
    <div>
      <h2 className="mb-3">React Redirect to Page with Navigate API Example</h2>

      <nav>
        <NavLink to="/">Home</NavLink>
        <NavLink to="/product">Product</NavLink>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/product" element={<Product />} />
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </div>
  )
}

export default App

Run App on Browser

We now need to start the application’s development server, make sure to run the given command:

npm start

You may now open the given url on the browser and test the react redirect feature:

http://localhost:3000

Conclusion

In this tutorial, we have described how to set up the essential routes in React js using the react-router-dom library. Apart from that, we learned how to use the basic APIs of router dom to set up the navigation in React app.

We ideally saw how to redirect to a specific page when the wrong URL is executed on the browser’s address bar.