React Redirect to Another Page with Router DOM Tutorial

React route redirect example; React router DOM is an additional package used for setting up routing in React environment. Router dom handles plenty of routing-related tasks through its powerful api mechanism.

In this definitive post, we are going to discover how to handle redirects in React js app. Redirects generally occur when you need to retain a contemporary link and send all the traffic to a specific destination without sending visitors to broken links.

To implement route redirect in React, we will use the Navigate api. The new Navigate api in v6 works like a charm; it is a declarative version of the useNavigate() hook.

The prop suggests the router to take the help of history.replaceState() when revamping the URL so the / entry won’t end up in the history stack.

How to Redirect using React Router DOM v6

  • Step 1: Set Up React App
  • Step 2: Install Router DOM Module
  • Step 3: Prepare New Components
  • Step 4: Implement Browser Router API
  • Step 5: Redirect Router
  • Step 6: Invoke React App

Set Up React App

The first tings is to do when developing react app is to install the Create React App tool, you can do it by executing the givne command from the terminal.

npm install create-react-app --global

Create a new react application in your system using the provided command:

npx create-react-app react-vlog

Install Router DOM Module

The primary thing is to do when working with routing in react is to install the react router dom package.

Let us try to install the package using the given command:

npm install react-router-dom@6

Prepare New Components

Open the project, make the components/ folder, make the User.js file and write the provided code into the file:

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

import React from 'react'

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

export default User

We will create the another file, in the same components/ folder, create Dashboard.js file:

import React from 'react'

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

export default Dashboard

Implement Browser Router API

We are now going to wrap the App component with BrowserRouter that we will import from the router dom library.

Go to index.js file, and write the code as suggested below.

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

Redirect Router

Open the App.js file that you can see in the src/ folder—import both components we created earlier and import all the router dom modules.

We redirect the route to /user route, especially when a wrong or broken URL is used.

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

import User from './components/User'
import Dashboard from './components/Dashboard'

const App = () => {
  return (
    <div>
      <h2>Redirect in React Router Dom v6</h2>

      <nav>
        <NavLink to="/user">User</NavLink>
        <NavLink to="/dashboard">Dashboard</NavLink>
      </nav>

      <Routes>
        <Route path="/user" element={<User />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="*" element={<Navigate to="/user" replace />} />
      </Routes>
    </div>
  )
}

export default App

Invoke React App

You are utterly ready to check out the route redirect in react, make sure to run the react server:

npm start

Your app will be served on the following url:

http://localhost:3000

React Redirect to Another Page with Router DOM Tutorial

Summary

So far, we have integrated all the code for creating redirects in react js app. We learned how to create a basic react app and install and configure react router dom package for enabling routing in react.

We determined how to work with Navigate element and redirect to a particular URL when the wrong URL or broken URL is used.