Как получить историю на response-router v4?

Ответ 1

Вам просто нужно иметь модуль, который экспортирует объект history. Затем вы импортируете этот объект во весь проект.

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

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

Затем вместо использования одного из встроенных маршрутизаторов вы должны использовать компонент <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')

Ответ 2

Это работает! 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);

Ответ 3

Чтобы принять принятый ответ, вы можете использовать react и сам react-router, чтобы предоставить вам объект history, который вы можете поместить в файл и затем экспортировать.

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 {
  constructor(props) {
    super(props)
    globalHistory = props.history; 
  }

  componentDidUpdate() {
    globalHistory = this.props.history;
  }

  render(){
    return null;
  }
}

export const GlobalHistory = withRouter(Spy);

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

Затем вы импортируете Component и монтируете для инициализации переменной истории:

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

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

А затем вы можете просто импортировать приложение, когда оно смонтировано:

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'
};

Я даже сделал и пакет npm, который делает именно это.

Ответ 4

Если вы используете redux и redux-thunk, лучшим решением будет использование react-router-redux

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

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

Важно, чтобы документы могли выполнять некоторые конфигурации.

Ответ 5

В конкретном случае react-router использование context является допустимым сценарием, например

class MyComponent extends React.Component {
  props: PropsType;

  static contextTypes = {
    router: PropTypes.object
  };

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

Вы можете получить доступ к экземпляру истории через контекст маршрутизатора, например. this.context.router.history.