Bagaimana untuk Melaksanakan Laluan Dilindungi dalam React Router v5 dan v6?

Bagaimana untuk mencipta laluan yang dilindungi dengan react-router-dom?

Isu

<BrowserRouter>
  <Switch>
    {authLogin ? (
      <>
        <Route path="/dashboard" component={Dashboard} exact />
        <Route exact path="/About" component={About} />
      </>
    ) : (
      <Route path="/" component={Login} exact />
    )}

    <Route component={PageNotFound} />
  </Switch>
</BrowserRouter>

Suis tidak mengendalikan pemaparan apa-apa selain komponen Laluan dan Ubah hala. Jika anda ingin "bersarang" seperti ini maka anda perlu membungkus setiap satu dalam laluan generik, tetapi itu tidak diperlukan sama sekali.

Komponen log masuk anda juga tidak mengendalikan pengalihan semula ke mana-mana " halaman utama" atau laluan peribadi yang pada asalnya wujud diakses.

Penyelesaian

react-router-dom v6

Dalam versi 6 komponen laluan tersuai telah tidak diminati, kaedah pilihan adalah menggunakan susun atur pengesahan komponen.

import { Navigate, Outlet } from 'react-router-dom';

const PrivateRoutes = () => {
  const location = useLocation();
  const { authLogin } = useContext(globalC);

  if (authLogin === undefined) {
    return null; // or loading indicator/spinner/etc
  }

  return authLogin
    ? <Outlet />
    : <Navigate to="/login" replace state={{ from: location }} />;
}

...

<BrowserRouter>
  <Routes>
    <Route path="/" element={<PrivateRoutes />} >
      <Route path="dashboard" element={<Dashboard />} />
      <Route path="about" element={<About />} />
    </Route>
    <Route path="/login" element={<Login />} />
    <Route path="*" element={<PageNotFound />} />
  </Routes>
</BrowserRouter>

atau

const routes = [
  {
    path: "/",
    element: <PrivateRoutes />,
    children: [
      {
        path: "dashboard",
        element: <Dashboard />,
      },
      {
        path: "about",
        element: <About />
      },
    ],
  },
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "*",
    element: <PageNotFound />
  },
];

...

export default function Login() {
  const location = useLocation();
  const navigate = useNavigate();
  const { authLogin, loginData } = useContext(globalC);

  useEffect(() => {
    if (authLogin) {
      const { from } = location.state || { from: { pathname: "/" } };
      navigate(from, { replace: true });
    }
  }, [authLogin, location, navigate]);

  return (
    <div
     >

react-router-dom v5

Buat komponen PrivateRoute yang menggunakan pengesahan anda konteks.

const PrivateRoute = (props) => {
  const location = useLocation();
  const { authLogin } = useContext(globalC);

  if (authLogin === undefined) {
    return null; // or loading indicator/spinner/etc
  }

  return authLogin ? (
    <Route {...props} />
  ) : (
    <Redirect
      to={{
        pathname: "/login",
        state: { from: location }
      }}
    />
  );
};

Kemas kini komponen Log Masuk anda untuk mengendalikan ubah hala kembali ke laluan asal yang sedang diakses.

export default function Login() {
  const location = useLocation();
  const history = useHistory();
  const { authLogin, loginData } = useContext(globalC);

  useEffect(() => {
    if (authLogin) {
      const { from } = location.state || { from: { pathname: "/" } };
      history.replace(from);
    }
  }, [authLogin, history, location]);

  return (
    <div
     >

Render semua laluan anda dalam "senarai rata"

function Routes() {
  return (
    <BrowserRouter>
      <Switch>
        <PrivateRoute path="/dashboard" component={Dashboard} />
        <PrivateRoute path="/About" component={About} />
        <Route path="/login" component={Login} />
        <Route component={PageNotFound} />
      </Switch>
    </BrowserRouter>
  );
}

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Laluan Dilindungi dalam React Router v5 dan v6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!