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?

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

• Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: …\node_modules\@mdx-js\react\index.js