Set a Default route with redirect using React Router

avatar

Borislav Hadzhiev

Last updated: Apr 30, 2022

banner

Photo from Unsplash

Set a Default route with redirect using React Router #

Use the Navigate element to set a default route with redirect in React Router, e.g. <Route path="/" element={<Navigate to="/dashboard" />} />. The Navigate element changes the current location when it is rendered.

App.js
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
<Route path="/" element={<Navigate to="/dashboard" />} />

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

App.js
<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.

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

App.js
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>; }

The AuthWrapper component checks if the isAuthenticated boolean is true and if it is, it redirects to /dashboard, otherwise, it redirects to /login.

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

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.