如何在新的 React Router v4 中访问历史对象答案

【问题标题】：how to access history object in new React Router v4如何在新的 React Router v4 中访问历史对象
【发布时间】：2017-08-23 18:59:19
【问题描述】：

我已经在其他线程中尝试了所有建议的方法，但仍然无法正常工作，这就是我发布问题的原因。

所以我有history.js 看起来像这样

import { createBrowserHistory } from 'history';

export default createBrowserHistory;

我的index.js

render((
        <Router history={history}>
            <div>
                <Route component={App}/>
            </div>
        </Router>
    ), document.getElementById('root')
);

Home.js 看起来像这样

class Home extends Component {
    handleSubmit(e) {
        e.preventDefault();

        let teacherName = e.target.elements[0].value;
        let teacherTopic = e.target.elements[1].value;
        let path = `/featured/${teacherName}/${teacherTopic}`;
        history.push(path);

    }

    render() {
        return (
            <div className="main-content home">
                <hr />
                <h3>Featured Teachers</h3>
                <form onSubmit={this.handleSubmit}>
                    <input type="text" placeholder="Name"/>
                    <input type="text" placeholder="Topic"/>
                    <button type="submit"> Submit </button>
                </form>
            </div>
        );
    }
}

export default Home;

Home.js 实际上是在 app.js 中路由的，而 app.js 是在 index.js 中路由的。

问题是我无法在任何地方访问历史对象。

我尝试过的方法如下

1) this.context.history.push(path) in home.js - 无法访问未定义的上下文

2) this.props.history.push(path) in home.js - 无法访问未定义的道具

3) browserHistory.push(path) in index.js - 现在已弃用

4) 上述方式 - _history2.default.push 不是函数

我上面尝试过的方法都不起作用。第二个是最奇怪的，因为根据文档https://reacttraining.com/react-router/web/api/Route/Route-render-methods

，我应该能够在任何地方访问历史对象作为道具

我知道以前的 v2 或 v3 访问历史记录的方式也已被弃用。

那么知道如何在 React Router v4 中访问历史对象的人可以回答这个问题吗？谢谢。

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

在我看来，您可能缺少withRouter 连接。这将使该组件可以使用历史道具

...

import { withRouter } from 'react-router'

class Home extends Component {
  functionMethod() {
    const { history: { push } } = this.props;
    doStuff();
    push('/location');
  }
  ...
}

export default withRouter(Home);

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

【讨论】：

我收到cannot read property props of null。无论我做什么，似乎我都无法访问道具
道具不在this？听起来你没有成功地确定你的功能范围。尝试onSubmit={e => this.handleSubmit(e)}或在构造函数中绑定handleSubmit
哦，该解决方案有效。但为什么？ this.handleSubmit 应该在实例中引用相同的方法，不是吗？我很确定它仅在反应路由器 v3 中由 this.handleSubmit 工作。你能给我解释一下吗？谢谢
this 的值很大程度上取决于函数的调用方式。当你像 onSubmit={this.handleSubmit} 一样将方法作为引用传递时，React 稍后会实例化该类，并且该实例将在上下文中调用该函数，但与您定义类的上下文不同。看看这个：jsbin.com/xayujimosa/1/edit?js,console
是的。更准确地说，“它将被实例化”可能是“this 上下文将被定义”。

【解决方案2】：

使用钩子：useHistory

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

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

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

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

【讨论】：

我无法在 app.js 中访问我放置所有路线的历史记录。

【解决方案3】：

我有一段时间遇到这个问题，只是没有 withRouter 连接。

import { withRouter } from 'react-router';


class Sample extends Component{

  render()
  {

     <button type="button" onClick={()=>{
                                this.props.history.push('/');
                                window.location.reload();    }}>
  }
}

export default withRouter(Sample);

【讨论】：