Comment implémenter correctement les routes protégées dans React Router Dom ?

Comment créer une route protégée avec react-router-dom ?

Problème

Le code suivant est une tentative de création d'un route protégée dans une application React utilisant 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>
            <route exact path="/About" component="{About}"></route>
          >
        ) : (
          <route path="/" component="{Login}" exact></route>
        )}

        <route component="{PageNotFound}"></route>
      </switch>
    </browserrouter>
  );
}

export default Routes;

Cependant, ce code ne fonctionne pas comme prévu. L'utilisateur peut accéder aux itinéraires protégés même s'il n'est pas connecté.

Solution

Il y a deux problèmes principaux avec le code :

1. Le composant Switch ne gère rien d'autre que les composants Route et Redirect. Si vous souhaitez « imbriquer » les composants de route, vous devez envelopper chacun d'eux dans un composant Route.
2. Le composant de connexion ne gère pas la redirection de l'utilisateur vers la route d'origine à laquelle il essayait d'accéder après s'être connecté. dans.

Voici une version corrigée du code qui résout ces deux problèmes :

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"></redirect> : <login></login>}
        </route>
        <route path="/dashboard">
          {authLogin ? <dashboard></dashboard> : <redirect to="/"></redirect>}
        </route>

        <route exact path="/About" component="{About}"></route>
        <route component="{PageNotFound}"></route>
      </switch>
    </browserrouter>
  );
}

export default Routes;

Dans ce corrigé code :

1. Chaque composant Route est enveloppé dans un composant Route parent.
2. Le composant Login utilise un composant Redirect pour rediriger l'utilisateur vers la page du tableau de bord après s'être connecté.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!