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