How To Set A Default Route With Redirect Using React Router

Set a Default route with redirect using React Router


You are looking to set a default path in your React app. Check out the guidelines for how to Set a Default route with redirect using React Router.

Solution to set a Default route with redirect using React Router

React Router is a library for standard URL navigation in React. It allows navigating between views of different components in a React App. 

In simple terms, the application’s interface keeps synchronizing with the URL on the browser. React Router allows you to route the data flow in your application explicitly. Basically, if you have this URL, it will be equivalent to this Route, and the corresponding interface.

Before getting started, you must first install the react-router-dom library by using this command in the terminal.

npm install react-router-dom

Here is a simple app to help you solve the problem.

In App.js:

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

function App(){
  return (
    <div className = "App">
      <div className = "pt-3">

          <ul className = "nav nav-pills nav-justified">

            <li className = "nav-item">
              <NavLink to="/home" className = "nav-link"> Home </NavLink>
            </li>

            <li className = "nav-item">
              <NavLink to="/login" className = "nav-link"> Login </NavLink>
            </li>

            <li className = "nav-item">
              <NavLink to="/signup" className = "nav-link">Sign up</NavLink>
            </li>

          </ul>
     

        <Routes>
          <Route path="/home" element={<Homepage />} />   
          <Route path="/login" element={<Login />} />
          <Route path="/signup" element={<Signup />} />
	      <Route path="*" element={<Navigate to="/home" />} />
        </Routes>

      </div>
    </div>
  );
}

function Homepage() {
  return <div><h1>Welcome to HomePage</h1></div>;
}

function Login() {
  return <div><h1>Login Page</h1></div>;
}

function Signup() {
  return <div><h1>Sign up Page</h1></div>;
}
export default App;

Output:

In this example, I use the ‘Navigate’ element to set a default route in React. As you can see in the program, whenever you visit a route that does not exist, you will be redirected to ‘/home’ because I have set the path prop as  ‘*’. You can set it to whatever you want. Eg, it could be ‘/homepage’, ‘/main’,.. but eventually, when you access that route you will also be redirected to ‘/home’.

Attention, this guide is for React Router v6. If you use an earlier version, try replacing Navigate with Redirect. For example:

<Redirect to="/home" />  // replace with this line: <Route path="*" element={<Navigate to="/home" />} />

Summary

That’s all I want to cover in this article. Try to practice in your project for better understanding of how to Set a Default route with redirect using React Router and get the best results.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *