close

How to redirect in React Router v6?

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?

  1. 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.

  2. 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

Leave a Comment