如何在新的React Router v4中访问历史对象 [英] how to access history object in new React Router v4

问题描述

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

I have tried all the suggested ways in other threads and it is still not working which is why I am posting the question.

所以我有这样的 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中路由的.

Home.js is actually routed in app.js which is routed in index.js.

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

The problem is that I cannot access history object anywhere.

我尝试过的方法如下

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

1) this.context.history.push(path) in home.js - cannot access context of undefined

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

2) this.props.history.push(path) in home.js - cannot access props of undefined

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

3) browserHistory.push(path) in index.js - this is deprecated now

4)上面的方法-_history2.default.push不是函数

4) the way above - _history2.default.push is not a function

我在上面尝试过的任何方法都无法正常工作.第二个是最奇怪的，因为我应该能够根据文档 https://reacttraining.com/react-router/web/api/Route/Route-render-methods

None of the methods that I have tried above works. The second was the strangest as I should be able to access history object as props anywhere according to the documentation https://reacttraining.com/react-router/web/api/Route/Route-render-methods

我知道不赞成使用以前的v2或v3访问历史记录的方式.

I know the previous v2 or v3 way of accessing history is also deprecated.

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

So can someone who knows how to access history object in React Router v4 answer this question? Thanks.

推荐答案

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

Looks to me like you might be missing a withRouter connection. this would make the history props available to this component

...

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

这篇关于如何在新的React Router v4中访问历史对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！