Sometimes, we want to fix ‘Redirect’ is not exported from ‘react-router-dom’ with React Router v6.
In this article, we’ll look at how to fix ‘Redirect’ is not exported from ‘react-router-dom’ with React Router v6.
How to fix ‘Redirect’ is not exported from ‘react-router-dom’ with React Router v6?
To fix ‘Redirect’ is not exported from ‘react-router-dom’ with React Router v6, we should import Navigate
instead of Redirect
.
For instance, we write
import {
BrowserRouter as Router,
Routes,
Route,
Navigate,
} from "react-router-dom";
import Home from "../home/Home";
export default function App() {
return (
<Router>
<Routes>
<Route path="/home" element={<Home />} />
<Route path="/" element={<Navigate replace to="/home" />} />
</Routes>
</Router>
);
}
to use the Navigate
component to redirect to the /home route when we go to /
as specified by
<Route path="/" element={<Navigate replace to="/home" />} />
Conclusion
To fix ‘Redirect’ is not exported from ‘react-router-dom’ with React Router v6, we should import Navigate
instead of Redirect
.