Javascript 如何在新的 React Router v4 中访问历史对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43107912/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to access history object in new React Router v4
提问by forJ
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.jslooking like this
所以我history.js看起来像这样
import { createBrowserHistory } from 'history';
export default createBrowserHistory;
My index.js
我的 index.js
render((
<Router history={history}>
<div>
<Route component={App}/>
</div>
</Router>
), document.getElementById('root')
);
Home.jsLooks like this
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 is actually routed in app.js which is routed in index.js.
Home.js 实际上是在 app.js 中路由的，而 app.js 是在 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
1)this.context.history.push(path)在 home.js - 无法访问未定义的上下文
2) this.props.history.push(path)in home.js - cannot access props of undefined
2)this.props.history.push(path)在 home.js 中 - 无法访问未定义的道具
3) browserHistory.push(path)in index.js - this is deprecated now
3)browserHistory.push(path)在 index.js 中 - 现在已弃用
4) the way above - _history2.default.push is not a function
4) 上面的方式 - _history2.default.push 不是函数
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
我上面尝试过的方法都没有奏效。第二个是最奇怪的，因为我应该能够根据文档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.
我知道以前的 v2 或 v3 访问历史记录方式也已弃用。
So can someone who knows how to access history object in React Router v4 answer this question? Thanks.
那么知道如何在 React Router v4 中访问历史对象的人可以回答这个问题吗？谢谢。
回答by Thomas Ingalls
Looks to me like you might be missing a withRouterconnection. this would make the history props available to this component
在我看来，您可能缺少withRouter连接。这将使历史道具可用于此组件
...
import { withRouter } from 'react-router'
class Home extends Component {
functionMethod() {
const { history: { push } } = this.props;
doStuff();
push('/location');
}
...
}
export default withRouter(Home);
回答by Luhn
use the hook: useHistory
使用钩子：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>
);
}
回答by D.Yash
I had this problem for a while and it was simply not having the withRouter connection.
我有一段时间遇到这个问题，只是没有 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);
`
`
