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.
