Set a Default route with redirect using React Router

# Set a Default route with redirect using React Router

Use the Navigate element to set a default route with redirect in React Router.

The Navigate element changes the current location when it is rendered.

App.js

Copied!
import React from 'react';
import {Route, Link, Routes, Navigate} from 'react-router-dom';

export default function App() {
  return (
    <div>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/does-not-exist">Catch all route</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/about" element={<About />} />
          {/* 👇️ Redirect to /dashboard when the user goes to / */}
          <Route path="/" element={<Navigate to="/dashboard" />} />

          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/login" element={<Login />} />

          {/* 👇️ Only match this when no other routes match */}
          <Route
            path="*"
            element={
              <div>
                <h2>404 Page not found</h2>
              </div>
            }
          />
        </Routes>
      </div>
    </div>
  );
}

function Dashboard() {
  return <h2>Dashboard</h2>;
}

function Login() {
  return <h2>Login</h2>;
}

function About() {
  return <h2>About</h2>;
}

react router default route navigate

The code for this article is available on GitHub

We used the Navigate element to redirect the user to /dashboard every time they go to the / route.

App.js

Copied!
<Route path="/" element={<Navigate to="/dashboard" />} />

If you need to do this for every route, use the asterisk * path.

App.js

Copied!
<Route
  path="*"
  element={
    <Navigate to="/dashboard" />
  }
/>

When the path prop is set to an asterisk *, it only matches when no other routes match.

You can also conditionally determine what page to redirect to.

# Conditionally Redirect to a different page

Here is an example that uses an isAuthenticated boolean to determine whether to redirect to /dashboard or /login.

App.js

Copied!
import React from 'react';
import {Route, Link, Routes, Navigate} from 'react-router-dom';

export default function App() {
  const isAuthenticated = true;

  return (
    <div>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/does-not-exist">Catch all route</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/about" element={<About />} />

          <Route
            path="/"
            element={<AuthWrapper isAuthenticated={isAuthenticated} />}
          />

          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/login" element={<Login />} />

          {/* 👇️ Only match this when no other routes match */}
          <Route
            path="*"
            element={
              <div>
                <h2>404 Page not found</h2>
              </div>
            }
          />
        </Routes>
      </div>
    </div>
  );
}

// 👇️ Conditionally redirect based on isAuthenticated boolean
const AuthWrapper = ({isAuthenticated}) => {
  return isAuthenticated ? (
    <Navigate to="/dashboard" replace />
  ) : (
    <Navigate to="/login" replace />
  );
};

function Dashboard() {
  return <h2>Dashboard</h2>;
}

function Login() {
  return <h2>Login</h2>;
}

function About() {
  return <h2>About</h2>;
}

conditionally redirect to different page

The code for this article is available on GitHub

The AuthWrapper component checks if the isAuthenticated boolean is true.

If the condition is met, it redirects to /dashboard, otherwise, it redirects to /login.

Our AuthWrapper component uses conditional logic and determines what should get rendered when.

I've also written a detailed guide on how to handle 404 page not found in React Router.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Set a Default route with redirect using React Router