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

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