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>
);
}
Need Some React Help?
Search fiverr for freelance React developers.
Follow me for updates
When I'm not coding...
Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!
More React Posts
- Next.js 13 + App Router + MongoDB - User Rego and Login Tutorial with Example
- Next.js 13 - Fix for client component ('use client') hangs when fetching data in useEffect hook
- Add Google AdSense to a Single Page App - React, Angular, Vue, Next etc...
- Next.js 13 + MySQL - User Registration and Login Tutorial with Example App
- Next.js Router - Listen to route (location) change with useRouter
- Next.js 13 + MongoDB - User Registration and Login Tutorial with Example App
- React Router v6 - Redirect with Navigate and useNavigate
- Redux Toolkit createAsyncThunk - Dispatch a Redux Action from an Async Thunk in React with RTK
- React 18 + Redux - User Registration and Login Example & Tutorial
- React Router v6 - Listen to location (route) change without history.listen
- React + Axios - Add Bearer Token Authorization Header to HTTP Request
- Redux Toolkit - Fix "The object notation for `createSlice.extraReducers` is deprecated" in React
- React Router 6 - Navigate outside React components
- React + Fetch - Add Bearer Token Authorization Header to HTTP Request
- React 18 + Redux - Basic HTTP Authentication Example & Tutorial
- React 18 Authentication with Node.js JWT API
- React 18 Authentication with .NET 6.0 (ASP.NET Core) JWT API
- React Hook Form 7 - Date Validation Example in React
- React Hook Form 7 - Email Validation Example
- React Router 6 - Private Route Component to Restrict Access to Protected Pages
- React - Access Environment Variables from dotenv (.env)
- React + Redux - HTTP POST Request in Async Action with createAsyncThunk
- React + Redux Toolkit - Fetch Data in Async Action with createAsyncThunk
- React 18 + Redux - JWT Authentication Example & Tutorial
- React - history listen and unlisten with React Router v5
- React Hook Form 7 - Dynamic Form Example with useFieldArray
- React + Fetch - Logout on 401 Unauthorized or 403 Forbidden HTTP Response
- React + Axios - Interceptor to Set Auth Header for API Requests if User Logged In
- React Hook Form - Reset form with default values and clear errors
- React Hook Form - Set form values in useEffect hook after async data load
- React + Fetch - Set Authorization Header for API Requests if User Logged In
- React + Recoil - User Registration and Login Example & Tutorial
- React Hook Form - Password and Confirm Password Match Validation Example
- React Hook Form - Display custom error message returned from API request
- React Hook Form - Submitting (Loading) Spinner Example
- React + Recoil - Basic HTTP Authentication Tutorial & Example
- React + Recoil - Set atom state after async HTTP GET or POST request
- React - Redirect to Login Page if Unauthenticated
- React - Catch All (Default) Redirect with React Router 5
- React + Recoil - JWT Authentication Tutorial & Example
- Next.js - Required Checkbox Example with React Hook Form
- Next.js - Form Validation Example with React Hook Form
- Next.js - Combined Add/Edit (Create/Update) Form Example
- Next.js - Redirect to Login Page if Unauthenticated
- Next.js - Basic HTTP Authentication Tutorial with Example App
- React - How to Check if a Component is Mounted or Unmounted
- Next.js - Alert (Toaster) Notifications
- Next.js 11 - User Registration and Login Tutorial with Example App
- Next.js 11 - JWT Authentication Tutorial with Example App
- Next.js - NavLink Component Example with Active CSS Class
- Next.js - Make the Link component work like React Router Link
- React Hook Form 7 - Required Checkbox Example
- React + Axios - HTTP DELETE Request Examples
- React + Axios - HTTP PUT Request Examples
- React Hook Form 7 - Form Validation Example
- Next.js 10 - CRUD Example with React Hook Form
- React + Fetch - HTTP DELETE Request Examples
- React + Fetch - HTTP PUT Request Examples
- React + Facebook - How to use the Facebook SDK in a React App
- React - Facebook Login Tutorial & Example
- React Router v5 - Fix for redirects not rendering when using custom history
- React Hook Form - Combined Add/Edit (Create/Update) Form Example
- React - CRUD Example with React Hook Form
- React - Required Checkbox Example with React Hook Form
- React - Form Validation Example with React Hook Form
- React - Dynamic Form Example with React Hook Form
- React + Formik Dynamic Form Example
- React - Display a list of items
- React + Axios - HTTP POST Request Examples
- React + Axios - HTTP GET Request Examples
- React - Setup Development Environment
- React Boilerplate - Email Sign Up with Verification, Authentication & Forgot Password
- React Hooks + RxJS - Communicating Between Components with Observable & Subject
- React + Formik - Combined Add/Edit (Create/Update) Form Example
- Fetch API - A Lightweight Fetch Wrapper to Simplify HTTP Requests
- React + Formik - Master Details CRUD Example
- React Hooks + Bootstrap - Alert Notifications
- React Router - Relative Links Example
- React Router - Remove Trailing Slash from URLs
- React + Fetch - Fake Backend Example for Backendless Development
- React Hooks + Redux - User Registration and Login Tutorial & Example
- React - Alert (Toaster) Notifications
- React - How to add Global CSS / LESS styles to React with webpack
- React + Formik 2 - Form Validation Example
- React + Formik - Required Checkbox Example
- React + Fetch - HTTP POST Request Examples
- React + Fetch - HTTP GET Request Examples
- React + ASP.NET Core on Azure with SQL Server - How to Deploy a Full Stack App to Microsoft Azure
- React + Node.js on AWS - How to Deploy a MERN Stack App to Amazon EC2
- React + Node - Server Side Pagination Tutorial & Example
- React + Formik - Form Validation Example
- React + RxJS (without Redux) - JWT Authentication Tutorial & Example
- React + RxJS - Communicating Between Components with Observable & Subject
- React - Role Based Authorization Tutorial with Example
- React - Basic HTTP Authentication Tutorial & Example
- React + npm - How to Publish a React Component to npm
- npm - JW React Pagination Component
- npm - JW React Modal Dialog
- React - Custom Modal Window / Dialog Box
- React + Redux - JWT Authentication Tutorial & Example
- React + Redux - User Registration and Login Tutorial & Example
- React - Pagination Example with Logic like Google