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

问题描述

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

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

import { createBrowserHistory } from 'history';导出默认 createBrowserHistory;

我的index.js

render((<路由器历史={历史}><div><路由组件={App}/>

</路由器>), document.getElementById('root'));

Home.js 看起来像这样

class Home 扩展组件 {处理提交(e){e.preventDefault();让教师名 = e.target.elements[0].value;让教师主题 = e.target.elements[1].value;let path = `/featured/${teacherName}/${teacherTopic}`;历史推送(路径)；}使成为() {返回 (<div className="main-content home"><小时/><h3>特色教师</h3><form onSubmit={this.handleSubmit}><input type="text" placeholder="姓名"/><input type="text" placeholder="Topic"/><按钮类型=提交">提交</表单>

);}}导出默认首页；

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) index.js 中的 browserHistory.push(path) - 现在已弃用

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

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

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

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

解决方案

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

<代码>...从反应路由器"导入 { withRouter }类 Home 扩展组件 {函数方法(){const { history: { push } } = this.props;做东西();push('/位置');}...}导出默认 withRouter(Home);

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

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

So I have history.js looking like this

import { createBrowserHistory } from 'history';

export default createBrowserHistory;

My index.js

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

Home.js Looks like this

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 is actually routed in app.js which is routed in index.js.

The problem is that I cannot access history object anywhere.

The ways I have tried are as below

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

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

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

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

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

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

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

解决方案

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屋！