Published: February 24 2023

React Router v6 - Catch All (Default) Redirect in React

Tutorial built with React 18.2 and React Router 6.8.1

This is a super quick post to show how to create a catch all (default) redirect to the home page (/) in a React app using React Router v6. The redirect runs when a request is made to a route that doesn't exist in the React app.

The way to do it is with a React Router Route component that matches all (*) routes and renders a Navigate element that redirects to the home route ("/") like this: <Route path="*" element={<Navigate to="/" />} />.

Example React Component with Catch All Redirect

Below is an example React component that uses React Router v6, it has a few page routes configured and a default catch all redirect to the home page.

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';

import { Home, About, Services, Contact } from 'pages';

export { App };

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="about" element={<About />} />
                <Route path="services" element={<Services />} />
                <Route path="contact" element={<Contact />} />

                {/* default redirect to home page */}
                <Route path="*" element={<Navigate to="/" />} />
            </Routes>
        </BrowserRouter>
    );
}

 


Subscribe or Follow Me For Updates

Subscribe to my YouTube channel or follow me on Twitter, Facebook or GitHub to be notified when I post new content.

Other than coding...

I'm currently attempting to travel around Australia by motorcycle with my wife Tina on a pair of Royal Enfield Himalayans. You can follow our adventures on YouTube, Instagram and Facebook.


Need Some React Help?

Search fiverr to find help quickly from experienced React developers.



Supported by