Comment naviguer par programme dans React Router sans mixins ?

Navigation programmatique dans React Router sans mixins

React Router permet une navigation transparente dans le contexte, mais comprendre son utilisation peut prêter à confusion. Explorons comment naviguer par programme sans utiliser de mixins.

React Router fournit l'objet d'historique à travers le contexte, offrant un accès aux méthodes push et replace pour la manipulation. Cependant, avec les progrès de React, vous disposez de plusieurs options de navigation programmatique :

1. Utilisez le withRouter HOC (React Router 6 non pris en charge) :

Le withRouter HOC injecte l'objet d'historique dans les accessoires du composant, permettant un accès direct aux méthodes de navigation.

import { withRouter } from 'react-router-dom';

const Button = withRouter(({ history }) => {
  const handleClick = () => { history.push('/new-location'); };
  return <button onClick={handleClick}>Click Me!</button>;
});

2. Rendre une route sans chemin (React Router 6 non pris en charge) :

Rendu un composant Route sans chemin, qui correspondra toujours à l'emplacement actuel et transmettra également l'accessoire d'historique.

import { Route } from 'react-router-dom';

const Button = () => {
  return (
    <Route render={({ history }) => {
      const handleClick = () => { history.push('/new-location'); };
      return <button onClick={handleClick}>Click Me!</button>;
    }} />
  );
};

3. Utiliser le contexte (complexe et obsolète) :

Cette approche nécessite une compréhension approfondie du contexte de React et doit être utilisée avec prudence. Vous devez définir un type de contexte de composant pour accéder à la prop historique.

import React from 'react';

const Button = (props, context) => {
  const handleClick = () => { context.history.push('/new-location'); };
  return <button onClick={handleClick}>Click Me!</button>;
};

Button.contextTypes = {
  history: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired
  })
};

Pour la plupart des scénarios, les options 1 et 2 offrent une simplicité et sont recommandées.

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!