如何在 React Router v6 中重定向？

Rod*_*lva 190

我认为您应该使用不匹配路由方法。

在文档中检查这一点。

reactrouter./docs/en/v6/getting-started/tutorial#adding-a-no-match-route

import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/lab" element={<Lab />} />
    <Route
        path="*"
        element={<Navigate to="/" replace />}
    />
  </Routes>
</BrowserRouter>

更新 - 2022 年 3 月 18 日

为了保持历史干净，你应该设置replaceprop. 这将避免用户单击返回后的额外重定向。感谢@Paul 这个提示。

非常感谢兄弟。你的回答救了我。整整一周我一直试图在 RRD5 中找到 render prop 的确切语法替换，最后经过几天的研究，我找到了你的答案。非常感谢<3 (4认同) 最好使用`<Navigate to="/" replace />`，否则会在历史记录中添加一个新条目，如果您尝试导航回来，您会再次被重定向，因此您会被卡住。 (3认同)

小智 32

我找到了另一种方法来做到这一点：

import { useNavigate } from "react-router-dom";
let navigate = useNavigate();

useEffect(() => {
   if (LoggedIn){
      return navigate("/");
   }
},[LoggedIn]);

reactrouter./docs/en/v6/getting-started/overview#navigation

小智 7

创建文件 RequireAuth.tsx

import { useLocation, Navigate } from "react-router-dom";
import { useAuth } from "../hooks/Auth";

export function RequireAuth({ children }: { children: JSX.Element }) {
  let { user } = useAuth();
  let location = useLocation();

  if (!user) {
    return <Navigate to="/" state={{ from: location }} replace />;
  } else {
    return children;
  }
}

导入需要用户私有路由器的组件：

import { Routes as Switch, Route } from "react-router-dom";

import { RequireAuth } from "./RequireAuth";
import { SignIn } from "../pages/SignIn";
import { Dashboard } from "../pages/Dashboard";

export function Routes() {
  return (
    <Switch>
      <Route path="/" element={<SignIn />} />
      <Route
        path="/dashboard"
        element={
          <RequireAuth>
            <Dashboard />
          </RequireAuth>
        }
      />
    </Switch>
  );
}

Ayu*_*nda 5

在反应的 V5 中，即。react-router-dom 我们有 Redirect 组件。但是在 React V6 中，它被更新为导航组件。

我们可以在此组件中传递替换，以避免在单击后退和前进选项时发生不必要的重定向。

下面附上使用演示：

<Route  path="/" element={user ? <Home /> : <Register />} />
<Route path="/login" element={user ? <Navigate to="/" replace /> :  <Login />}  />
<Route path = "/register" element={user ? <Navigate to="/" replace /> :  <Register />} />