Utiliser history.Push dans action creator avec react-router-v4?

Question

La seule méthode de travail que j'ai trouvée pour résoudre ce problème sans utiliser react-router-redux vers l'itinéraire depuis action creator async action l'achèvement est en passant le prop history du composant au créateur d'action et en faisant:

history.Push('routename');

Puisque BrowserRouter ignore le prop d'historique qui lui est passé, nous ne pouvons donc pas utiliser d'objets d'historique personnalisés avec l'histoire du navigateur.

Quelle est la meilleure façon de résoudre ce problème?

Answer 1

Au lieu d'utiliser BrowserRouter, vous pouvez utiliser Router avec un historique personnalisé comme

import { Router } from 'react-router'

import createBrowserHistory from 'history/createBrowserHistory'

export const history = createBrowserHistory()

<Router history={history}>
  <App/>
</Router>

auquel cas votre history.Push() fonctionnera. Avec BrowserRouter history.Push Ne fonctionne pas car la création d'un nouveau browserHistory ne fonctionnera pas car <BrowserRouter> Crée sa propre instance d'historique et écoute les modifications à ce sujet. Une autre instance modifiera donc l'url mais ne mettra pas à jour le <BrowserRouter>.

Une fois que vous avez créé un history personnalisé, vous pouvez l'exporter, puis l'importer dans votre action creator Et l'utiliser pour naviguer dynamiquement comme

import { history } from '/path/to/index';

const someAction = () => {
    return dispatch => {
        ApiCall().then((res) => {
            dispatch({type: 'SOME_CALL', payload: res })
            history.Push('/home');
        })
    }
}