Comment obtenir l'historique sur react-router v4?

Question

- Je avoir un petit problème de la migration de Réagir-Routeur v3 à v4. dans la v3, j'ai été capable de le faire n'importe où:

import { browserHistory } from 'react-router';
browserHistory.push('/some/path');

Comment puis-je réaliser cela dans v4.

Je sais que je pourrais utiliser, le hoc withRouter, de réagir contexte, ou d'un événement routeur accessoires lorsque vous êtes dans un Composant. mais il n'est pas le cas pour moi.

Je suis à la recherche de l'équivalence des NavigatingOutsideOfComponents en v4

Answer 1

Vous avez juste besoin d'un module qui exporte un objet history . Ensuite, vous importeriez cet objet tout au long de votre projet.

 // history.js
import { createBrowserHistory } from 'history'

export default createBrowserHistory({
  /* pass a configuration object here if needed */
})
 

Ensuite, au lieu d'utiliser l'un des routeurs intégrés, vous utiliseriez le composant <Router> .

 // index.js
import { Router } from 'react-router-dom'
import history from './history'
import App from './App'

ReactDOM.render((
  <Router history={history}>
    <App />
  </Router>
), holder)
 

 // some-other-file.js
import history from './history'
history.push('/go-here')
 

Answer 2

Cela marche! https://reacttraining.com/react-router/web/api/withRouter

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

class MyComponent extends React.Component {
  render () {
    this.props.history;
  }
}

withRouter(MyComponent);
 

Answer 3

Similiary à accepté de répondre à ce que vous pourriez faire est d'utiliser react et react-router lui-même pour vous offrir history objet qui vous permet dans un fichier, puis exporter.

history.js

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

// variable which will point to react-router history
let globalHistory = null;

// component which we will mount on top of the app
class Spy extends React.Component {
  componentWillMount() {
    const { history } = this.props;
    globalHistory = history; 
  }

  componentWillReceiveProps(nextProps) {
    globalHistory = nextProps.history;
  }

  render(){
    return null;
  }
}

export const GlobalHistory = withRouter(Spy);

// export react-router history
export default function getHistory() {    
  return globalHistory;
}

Vous tard, puis importer les Composants et monter à initialiser les variables des antécédents:

import { BrowserRouter } from 'react-router-dom';
import { GlobalHistory } from './history';

function render() {
  ReactDOM.render(
    <BrowserRouter>
        <div>
            <GlobalHistory />
            //.....
        </div>
    </BrowserRouter>
    document.getElementById('app'),
  );
}

Et puis, vous pouvez simplement importer dans votre application lorsqu'il a été monté:

import getHistory from './history'; 

export const goToPage = () => (dispatch) => {
  dispatch({ type: GO_TO_SUCCESS_PAGE });
  getHistory().push('/success'); // at this point component probably has been mounted and we can safely get `history`
};

J'ai même fait et mnp paquet .

Answer 4

Si vous utilisez redux et redux-thunk, la meilleure solution sera d'utiliser react-router-redux

 // then, in redux actions for example
import { push } from 'react-router-redux'

dispatch(push('/some/path'))
 

Il est important de consulter la documentation pour effectuer certaines configurations.

Answer 5

Dans le cas spécifique de react-router , utiliser context est un scénario valide, par exemple:

 class MyComponent extends React.Component {
  props: PropsType;

  static contextTypes = {
    router: PropTypes.object
  };

  render () {
    this.context.router;
  }
}
 

Vous pouvez accéder à une instance de l'historique via le contexte du routeur, par exemple this.context.router.history .