Comment implémenter des routes authentifiées dans React Router 4 ?

Gestion des routes authentifiées dans React Router 4

React Router 4 introduit des changements qui empêchent la mise en œuvre simple de routes authentifiées en utilisant l'approche traditionnelle. Pour résoudre ce problème, explorons une solution alternative.

Erreur rencontrée :

Dans votre implémentation initiale, vous avez tenté d'utiliser le et simultanément, ce qui est désormais interdit dans React Router 4.

Approche proposée :

Pour surmonter cette erreur, nous pouvons utiliser l'option en conjonction avec un composant composant. L'option Le composant sera rendu conditionnellement en fonction de l'accessoire authentifié, soit en affichant l'itinéraire souhaité, soit en redirigeant vers une page de connexion si l'utilisateur n'est pas authentifié.

Composant PrivateRoute :

function PrivateRoute ({component: Component, authed, ...rest}) {
  return (
    <Route
      {...rest}
      render={(props) => authed === true
        ? <Component {...props} />
        : <Redirect to={{pathname: '/login', state: {from: props.location}}} />}
    />
  )
}

Itinéraires mis à jour :

<Route path='/' exact component={Home} />
<Route path='/login' component={Login} />
<Route path='/register' component={Register} />
<PrivateRoute authed={this.state.authed} path='/dashboard' component={Dashboard} />

Répartition des actions dans la méthode render() :

Votre préoccupation concernant la répartition des actions dans le rendu( ) la méthode est valide. Cette méthode est généralement déconseillée car elle peut entraîner des effets secondaires potentiels et des problèmes de performances. Au lieu de cela, vous devez répartir les actions dans les méthodes de cycle de vie telles que composantDidMount ou utiliser les outils de gestion d'état de React comme Redux ou l'API Context.

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!