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

Implémentation de routes authentifiées dans React Router 4 : exploration de différentes approches

Dans React Router 4, les routes authentifiées posent un défi en raison de l'avertissement contre en utilisant à la fois le et au sein du même itinéraire. Cet article explore des approches alternatives pour implémenter efficacement des routes authentifiées.

Une méthode consiste à créer un composant AuthenticatedRoute personnalisé qui restitue la route uniquement si l'utilisateur est connecté. Cependant, certains soutiennent que l'envoi d'une action dans la méthode de rendu semble non conventionnel.

Une autre solution exploite le composant Redirect pour rediriger les utilisateurs non autorisés vers une page de connexion. En créant un composant PrivateRoute qui restitue le composant désigné uniquement si l'utilisateur est authentifié, vous pouvez simplifier l'implémentation.

L'extrait de code suivant illustre l'approche PrivateRoute :

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

Avec cette approche , vos itinéraires peuvent être structurés comme suit :

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

En comprenant ces différentes méthodologies, vous pouvez implémenter efficacement des itinéraires authentifiés dans React Router 4, garantissant une navigation sécurisée et contrôlée au sein de votre application.

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!