If You Updated React Router v6 which is react-router-dom 6.0.1 and then You are trying to use Route
then you may be facing TS2322: Type ‘{ render: () => Element; }’ is not assignable to type ‘IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)’. Property ‘render’ does not exist on type ‘IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)’ error in your reactjs project. So Today In this tutorial we are going to learn about How to redirect in React Router v6?
How to redirect in React Router v6?
How to redirect in React Router v6?
To redirect in React Router v6 You can Use the no matching route approach and also you can explore the below 3 methods to redirect in React Router v6. Thank you.
redirect in React Router v6
To redirect in React Router v6 You can Use the no matching route approach and also you can explore the below 3 methods to redirect in React Router v6. Thank you.
Method 1: Use this snippet
import { useNavigate } from "react-router-dom";
let navigate = useNavigate();
useEffect(() => {
if (LoggedIn){
return navigate("/dash");
}
},[LoggedIn]);
Method 2: Use this Example
<Routes>
<Route path="/" element={<Home />} />
<Route path="/dash" element={<DashBoard />} />
<Route
path="*"
element={<Navigate to="/" replace />}
/>
</Routes>
Method 3: Use this Code
<Switch>
<Route path="/" element={<HomeScreen />} />
<Route
path="/dash"
element={
<LoggedIn>
<DashboardScreen />
</LoggedIn>
}
/>
</Switch>
Conclusion
It’s all About this article. Hope this method worked for you. Comment below Your thoughts and your queries. Also, Comment below which method worked for you?
Also, Read