Comment pousser à l'Histoire Réagir Routeur v4?

Réagir Routeur v4 est fondamentalement différente de la v3 (et plus tôt) et vous ne pouvez pas faire browserHistory.push() comme vous avez utilisé pour.

Cette discussion semble liée, si vous voulez plus d'info:

• La création d'une nouvelle browserHistory ne fonctionnera pas parce que <BrowserRouter> crée sa propre histoire instance, et est à l'écoute de modifications sur ce point. Afin qu'une autre instance de changer l'url, mais pas de mise à jour de la <BrowserRouter>.
• browserHistory n'est pas exposée par réagissent-routeur dans la v4, seulement dans la v2.

---

Au lieu de cela, vous avez quelques options pour ce faire:

• Utiliser le withRouter haute-composante de l'ordre

  Au lieu de cela, vous devez utiliser le withRouter forte composante de l'ordre, et étirable à l'élément qui va pousser à l'histoire. Par exemple:

  import React from "react";
  import { withRouter } from "react-router-dom";
  
  class MyComponent extends React.Component {
    ...
    myFunction() {
      this.props.history.push("/some/Path");
    }
    ...
  }
  export default withRouter(MyComponent);

  Découvrez la documentation officielle pour plus d'info:

  Vous pouvez obtenir l'accès à la histoire propriétés de l'objet le plus proche <Route>'s match via le withRouter d'ordre supérieur composant. withRouter ré-rendu de son composant à chaque fois les changements de route avec les mêmes accessoires que <Route> rendu accessoires: { match, location, history }.

---

• Utiliser le context API

  À l'aide du contexte peut être une des solutions les plus simples, mais étant expérimentale de l'API, elle est instable et non pris en charge. Utiliser seulement quand tout le reste échoue. Voici un exemple:

  import React from "react";
  import PropTypes from "prop-types";
  
  class MyComponent extends React.Component {
    static contextTypes = {
      router: PropTypes.object
    }
    constructor(props, context) {
       super(props, context);
    }
    ...
    myFunction() {
      this.context.router.history.push("/some/Path");
    }
    ...
  }

  Ont un look à la documentation officielle sur le contexte:

  Si vous souhaitez que votre application soit stable, ne pas utiliser le contexte. C'est un dispositif expérimental de l'API et il est susceptible de se rompre dans les futures versions de Réagir.

  Si vous insistez sur l'utilisation d'un contexte en dépit de ces avertissements, essayez d'isoler votre utilisation du contexte pour une petite surface et d'éviter d'utiliser le contexte de l'API directement lorsque possible, de sorte qu'il est plus facile de mettre à niveau lorsque les changements de l'API.

Selon Réagir Routeur v4 documentation - Redux l'Intégration en Profondeur de la session

L'intégration en profondeur est nécessaire pour:

"être capable de naviguer par l'envoi d'actions"

Toutefois, ils recommandent cette approche comme une alternative à la "intégration profonde":

"Plutôt que le dispatching des actions pour naviguer, vous pouvez passer à l'histoire de l'objet fourni pour acheminer les composants de vos actions et de naviguer avec elle là-bas."

De sorte que vous pouvez envelopper votre composant avec le withRouter forte composante de l'ordre:

export default withRouter(connect(null, { actionCreatorName })(ReactComponent));

qui va passer à l'histoire de l'API pour les accessoires. Vous pouvez donc appeler l'action créateur de passage de l'histoire en tant que param. Par exemple, à l'intérieur de votre ReactComponent:

onClick={() => {
  this.props.actionCreatorName(
    this.props.history,
    otherParams
  );
}}

Puis, à l'intérieur de votre actions/index.js:

export function actionCreatorName(history, param) {
  return dispatch => {
    dispatch({
      type: SOME_ACTION,
      payload: param.data
    });
    history.push("/path");
  };
}

Façon la plus simple de Réagir Routeur 4 est d'utiliser

this.props.history.push('/new/url');

Mais pour utiliser cette méthode, votre existant composant doit avoir accès à history objet. Nous pouvons accéder par

1. Si votre composant est lié à Route directement, alors votre composant a déjà accès à history objet.

   par exemple:

   <Route path="/profile" component={ViewProfile}/>

   Ici ViewProfile a accès à history.

2. Si pas connecté à Route directement.

   par exemple:

   <Route path="/users" render={() => <ViewUsers/>}

   Alors nous devons utiliser withRouter, un heigher ordre fuction de déformer le composant existant.

   À l'intérieur de ViewUsers composant

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

   • export default withRouter(ViewUsers);

   C'est maintenant, votre ViewUsers composant a accès à history objet.

Mise à JOUR

2- dans ce scénario, passer tous les parcours props à votre composant, et alors nous pouvons accéder à this.props.history de la composante même sans HOC

par exemple:

<Route path="/users" render={props => <ViewUsers {...props} />}

Dans ce cas, vous êtes de passage accessoires pour votre thunk. De sorte que vous pouvez simplement appeler

props.history.push('/cart')

Si ce n'est pas le cas vous pouvez toujours transmettre l'histoire de votre composant

export function addProduct(data, history) {
  return dispatch => {
    axios.post('/url', data).then((response) => {
      dispatch({ type: types.AUTH_USER })
      history.push('/cart')
    })
  }
}

J'ai été en mesure d'accomplir cela en utilisant bind(). J'ai voulu cliquer sur un bouton dans index.jsx, poster quelques données sur le serveur, l'évaluation de la réponse, et rediriger vers success.jsx. Voici comment j'ai travaillé que sur...

index.jsx:

import React, { Component } from "react"
import { postData } from "../../scripts/request"

class Main extends Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
        this.postData = postData.bind(this)
    }

    handleClick() {
        const data = {
            "first_name": "Test",
            "last_name": "Guy",
            "email": "[email protected]"
        }

        this.postData("person", data)
    }

    render() {
        return (
            <div className="Main">
                <button onClick={this.handleClick}>Test Post</button>
            </div>
        )
    }
}

export default Main

request.js:

import { post } from "./fetch"

export const postData = function(url, data) {
    //post is a fetch() in another script...
    post(url, data)
        .then((result) => {
            if (result.status === "ok") {
                this.props.history.push("/success")
            }
        })
}

success.jsx:

import React from "react"

const Success = () => {
    return (
        <div className="Success">
            Hey cool, got it.
        </div>
    )
}

export default Success

En se liant this à postData dans index.jsx, j'ai été en mesure d'accéder à this.props.history dans request.js... alors je peux réutiliser cette fonction dans les différentes composantes, juste pour faire sûr que je me souviens d'inclure this.postData = postData.bind(this) dans le constructor().

Voici mon hack (c'est mon niveau de la racine de fichier, avec un peu de redux mélangé là - bien que je ne suis pas en utilisant react-router-redux):

const store = configureStore()
const customHistory = createBrowserHistory({
  basename: config.urlBasename || ''
})

ReactDOM.render(
  <Provider store={store}>
    <Router history={customHistory}>
      <Route component={({history}) => {
        window.appHistory = history
        return (
          <App />
        )
      }}/>
    </Router>
  </Provider>,
  document.getElementById('root')
)

Je peux alors utiliser window.appHistory.push() d'où je veux (par exemple, dans mon redux fonctions de banque/thunks/sagas, etc) j'avais espéré que je pourrais simplement utiliser window.customHistory.push() mais pour une raison quelconque react-router ne semblait jamais mise à jour, même si l'url a changé. Mais de cette façon, j'ai l'instance EXACTE react-router utilise. Je n'aime pas mettre des trucs dans le contexte global, et c'est l'une des rares choses que j'aimerais faire avec vous. Mais c'est mieux que n'importe quel autre que j'ai vu de l'OMI.

vous pouvez l'utiliser comme cela que je le fais pour la connexion et manny choses différentes

class Login extends Component {
  constructor(props){
    super(props);
    this.login=this.login.bind(this)
  }


  login(){
this.props.history.push('/dashboard');
  }


render() {

    return (

   <div>
    <button onClick={this.login}>login</login>
    </div>

)

la première étape envelopper votre application dans le Routeur

import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));

Maintenant toute mon Application aura accès à BrowserRouter. Étape deux-je importer Route et passer ensuite en bas de ces accessoires. Probablement dans un de vos fichiers.

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

//lots of code here

//somewhere in my render function

    <Route
      exact
      path="/" //put what your file path is here
      render={props => (
      <div>
        <NameOfComponent
          {...props} //this will pass down your match, history, location objects
        />
      </div>
      )}
    />

Maintenant, si je lance la console.journal(ce.les accessoires) dans mon composant fichier js que je devrais obtenir quelque chose qui ressemble à ce

{match: {…}, location: {…}, history: {…}, //other stuff }

L'étape 2, je peux accéder à l'historique de l'objet à modifier ma position

//lots of code here relating to my whatever request I just ran delete, put so on

this.props.history.push("/") //then put in whatever url you want to go to

Aussi, je suis juste un codage bootcamp étudiant, donc je ne suis pas expert, mais je sais que vous aussi pouvez-vous utiliser

window.location = "/" //wherever you want to go

Corrigez-moi si je me trompe, mais quand j'ai testé ça il a recharger la page entière qui j'ai pensé a vaincu tout le point de l'utilisation de Réagir.

donc la façon dont je le fais, c'est:
- au lieu de redirection à l'aide history.push, je viens d'utiliser Redirect composant de react-router-dom
Lors de l'utilisation de ce composant, vous pouvez simplement passer push=true, et il prendra soin du reste

import * as React from 'react';
import { Redirect } from 'react-router-dom';
class Example extends React.Component {
  componentDidMount() {
    this.setState({
      redirectTo: '/test/path'
    });
  }

  render() {
    const { redirectTo } = this.state;

    return <Redirect to={{pathname: redirectTo}} push={true}/>
  }
}