如何在react-router v4上获取历史记录？

Question

我有一些小问题从React-Router v3迁移到v4.在v3中我能够在任何地方执行此操作:

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

我如何在第4版中实现这一目标.

我知道withRouter当你在Component中时,我可以使用,特别的,反应上下文或事件路由器道具.但事实并非如此.

我正在寻找v4 中NavigatingOutsideOfComponents的等价性

Answer 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')

Answer 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);

Answer 3

如果您只需要历史对象才能导航到其他组件，则基于此答案：

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

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

Answer 4

Similiary到接受的答案是什么,你可以做的是使用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并mount以初始化历史变量:

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包就是这么做的.

Answer 5

如果您使用的是 redux 和 redux-thunk，最好的解决方案是使用react-router-redux

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

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

查看文档以进行一些配置很重要。