Sometimes, we want to fix no not found route with React-Router v6.

In this article, we’ll look at how to fix no not found route with React-Router v6.

How to fix no not found route with React-Router v6?

To fix no not found route with React-Router v6, we can add a route and then add a catch-all route that redirects to it.

For instance, we write

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

function App() {
  return (
    <div>
      <Routes>
        <Route path="/404" element={<div>Not found</div>} />
        <Route path="*" element={<Navigate replace to="/404" />} />
      </Routes>
    </div>
  );
}

to create the App component that add 2 Routes.

The first route has path ‘/404’` and renders ‘Not found’.

The 2nd Route is a catch all route that uses the Navigate component to navigate to the /404 route.

We use '*' to match anything that don’t match the paths listed in Routes above it.

Conclusion

To fix no not found route with React-Router v6, we can add a route and then add a catch-all route that redirects to it.