web-dev-qa-db-fra.com

Comment obtenir l'historique sur react-router v4?

J'ai un petit problème de migration de React-Router v3 vers v4. dans la v3, j'ai pu le faire n'importe où:

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

Comment y parvenir en v4.

Je sais que je pourrais utiliser, le withRouter hoc, le contexte de réaction ou les accessoires du routeur d'événements lorsque vous êtes dans un composant. mais ce n'est pas le cas pour moi.

Je recherche l'équivalence de NavigatingOutsideOfComponents en v4

reactjsreact-router
80
storm_buster

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')
145
Paul S

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);
63
Justin Yueh

Une réponse similaire à une réponse acceptée consiste à utiliser react et react-router lui-même pour vous fournir un objet history que vous pouvez définir 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 importez ensuite Component et montez pour initialiser la variable d’historique:

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

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

Et vous pouvez simplement importer dans votre application une fois celle-ci montée:

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 paquet npm qui fait exactement cela.

7
Tomasz Mularczyk

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.

4
Arnold Gandarillas