Bagaimana untuk Melaksanakan Laluan Dilindungi dengan Betul dalam React Router Dom?

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

Masalah

Kod berikut ialah percubaan untuk mencipta laluan yang dilindungi dalam aplikasi React menggunakan react-router-dom:

import { useContext } from "react";
import { globalC } from "./context";
import { Route, Switch, BrowserRouter } from "react-router-dom";
import About from "./About";
import Dashboard from "./Dashboard";
import Login from "./Login";
import PageNotFound from "./PageNotFound";

function Routes() {
  const { authLogin } = useContext(globalC);
  console.log("authLogin", authLogin);

  return (
    <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>
  );
}

export default Routes;

Walau bagaimanapun, kod ini tidak berfungsi seperti yang diharapkan. Pengguna boleh mengakses laluan yang dilindungi walaupun mereka tidak log masuk.

Penyelesaian

Terdapat dua isu utama dengan kod:

1. Komponen Suis tidak mengendalikan pemaparan apa-apa selain Laluan dan Ubah hala komponen. Jika anda ingin "menyarang" komponen laluan, anda perlu membungkus setiap satu dalam komponen Laluan.
2. Komponen Log Masuk tidak mengendalikan mengubah hala pengguna kembali ke laluan asal yang mereka cuba akses selepas mereka log masuk dalam.

Berikut ialah versi kod yang diperbetulkan yang membetulkan kedua-dua isu ini:

import { useContext } from "react";
import { globalC } from "./context";
import { Route, Switch, BrowserRouter, Redirect } from "react-router-dom";
import About from "./About";
import Dashboard from "./Dashboard";
import Login from "./Login";
import PageNotFound from "./PageNotFound";

function Routes() {
  const { authLogin } = useContext(globalC);
  console.log("authLogin", authLogin);

  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact>
          {authLogin ? <Redirect to="/dashboard" /> : <Login />}
        </Route>
        <Route path="/dashboard">
          {authLogin ? <Dashboard /> : <Redirect to="/" />}
        </Route>

        <Route exact path="/About" component={About} />
        <Route component={PageNotFound} />
      </Switch>
    </BrowserRouter>
  );
}

export default Routes;

Dalam ini diperbetulkan kod:

1. Setiap komponen Laluan dibalut dengan komponen Laluan induk.
2. Komponen Log Masuk menggunakan komponen Ubah hala untuk mengubah hala pengguna ke halaman papan pemuka selepas mereka log masuk.

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