React Router V6 路由

Mbr*_*vda 5

你不能 Route在 React Router v6 中编写 s。相反，在与其他路由相同的级别创建 Route，并在elementprop 中使用您的 PrivateRoute 组件。示例（来源）：

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

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

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