Set a Default route with redirect using React Router

avatar
Borislav Hadzhiev

Last updated: Jan 18, 2023
2 min

banner

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

# 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
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.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2023 Borislav Hadzhiev