How To 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:

• Create a React app in the current directory
• Updating state when props change in React
• Concatenate strings and variables in react

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js