Wie implementiert man geschützte Routen in React Router Dom richtig?

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

Problem

Der folgende Code ist ein Versuch, eine geschützte Route in einem React zu erstellen Anwendung mit 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;

Dieser Code funktioniert jedoch nicht wie erwartet. Der Benutzer kann auch dann auf die geschützten Routen zugreifen, wenn er nicht angemeldet ist.

Lösung

Es gibt zwei Hauptprobleme mit dem Code:

1. Die Switch-Komponente verarbeitet nichts anderes als Route- und Redirect-Komponenten. Wenn Sie Routenkomponenten „verschachteln“ möchten, müssen Sie jede einzelne in eine Routenkomponente einschließen.
2. Die Anmeldekomponente übernimmt nicht die Umleitung des Benutzers zurück zur ursprünglichen Route, auf die er zugreifen wollte, nachdem er sich angemeldet hat in.

Hier ist eine korrigierte Version des Codes, die diese beiden Probleme behebt:

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;

In dieser korrigierten Version Code:

1. Jede Route-Komponente ist in eine übergeordnete Route-Komponente eingebettet.
2. Die Login-Komponente verwendet eine Redirect-Komponente, um den Benutzer nach der Anmeldung zur Dashboard-Seite umzuleiten.

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