Wie implementiert man geschützte Routen in React Router v5 und v6?

Wie erstelle ich eine geschützte Route mit React-Router-Dom?

Problem

<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>

Der Switch funktioniert nicht Bewältigt das Rendern von anderen Komponenten als Route- und Redirect-Komponenten. Wenn Sie auf diese Weise „verschachteln“ möchten, müssen Sie jede in generische Routen einschließen, aber das ist völlig unnötig.

Ihre Anmeldekomponente übernimmt auch keine Umleitung zurück zu einer beliebigen „ home"-Seite oder private Routen, auf die ursprünglich zugegriffen wurde.

Lösung

react-router-dom v6

In Version 6 sind benutzerdefinierte Routenkomponenten in Ungnade gefallen, die bevorzugte Methode ist die Verwendung einer Authentifizierungslayoutkomponente.

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>

oder

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

Erstellen Sie eine PrivateRoute-Komponente, die Ihren Authentifizierungskontext nutzt.

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 }
      }}
    />
  );
};

Aktualisieren Sie Ihre Anmeldekomponente, um die Umleitung zurück zur ursprünglichen Route zu verarbeiten, auf die zugegriffen wird.

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
     >

Stellen Sie alle Ihre Routen in einer „flachen Liste“ dar

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

Das obige ist der detaillierte Inhalt vonWie implementiert man geschützte Routen in React Router v5 und v6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!