In react router 5 I could use a but that has been removed from react router 6. I think it's been replaced with , but that throws a security error for this usecase... For whatever reason.
Redirect is no longer in the react-router version 6. For react-router-dom v6, You can use Navigate instead of Redirect. Here is the example:
import {Routes, Route, Navigate } from "react-router-dom";
function App() {
return (
<>
<Routes>
<Route path="/404" element={<div>Page Not Found/div>} />
<Route path="*" element={<Navigate replace to="/404" />} />
</Routes>
</>
);
}
As of v6:
Remove <Redirect>s inside <Switch>
Remove any <Redirect> elements that are directly inside a <Switch>.
// Change this:
<Switch>
<Redirect from="about" to="about-us" />
</Switch>
// to this:
<Switch>
<Route path="about" render={() => <Redirect to="about-us" />} />
</Switch>
<Switch> are ok to remain. They will become <Navigate> elements in v6.