我已经在其他线程中尝试了所有建议的方法,但仍然无法正常工作,这就是我发布问题的原因。
所以我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)在 home.js - 无法访问未定义的上下文
2)this.props.history.push(path)在 home.js 中 - 无法访问未定义的props
3)browserHistory.push(path)在 index.js 中 - 现在已弃用
4) 上面的方式 - _history2.default.push 不是函数
我上面尝试过的方法都不起作用。第二个是最奇怪的,因为我应该能够根据文档https://reacttraining.com/react-router/web/api/Route/Route-render-methods在任何地方访问历史对象作为props
我知道以前的 v2 或 v3 访问历史记录方式也已弃用。
那么知道如何在 React Router v4 中访问历史对象的人可以回答这个问题吗?谢谢。