React Router V6 路由

Question

我正在尝试使用新发布的路由器实现 PrivateRoute 逻辑，但它似乎无法按预期工作。

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

import LogInPage from "./pages/LogIn";
import DashboardPage from "./pages/Dashboard";

function PrivateRoute({ path, element }) {
  const auth = true;

  return (
    <Route
      path={path}
      element={auth === true ? element : <Navigate replace to="/login" />}
    />
  );
}

function App() {
  return (
    <Routes>
      <Route path="/*" element={<PageNotFound />} />
      <Route path="/" element={<Navigate replace to="/dashboard" />} />
      <Route path="/login" element={<LogInPage />} />
      <PrivateRoute
        path="/dashboard"
        element={<DashboardPage />}
      />
    </Routes>
  );
}

export default App;

我缺少什么？Route如果 PrivateRoute 组件返回 a ，它不是仍然是一个组件吗Route？

Answer 1

Route您无法在 React Router v6 中组合s。相反，在与其他路由相同的级别创建路由，并在 prop 中使用 PrivateRoute 组件element。示例（来源）：

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

function App() {
  return (
    <Routes>
      <Route path="/public" element={<PublicPage />} />
      <Route
        path="/protected"
        element={
          // Good! Do your composition here instead of wrapping <Route>.
          // This is really just inverting the wrapping, but it's a lot
          // more clear which components expect which props.
          <RequireAuth redirectTo="/login">
            <ProtectedPage />
          </RequireAuth>
        }
      />
    </Routes>
  );
}

function RequireAuth({ children, redirectTo }) {
  let isAuthenticated = getAuth();
  return isAuthenticated ? children : <Navigate to={redirectTo} />;
}