我已经在其他主题中尝试了所有建议的方法,但它仍然无效,这就是我发布问题的原因。
所以我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中路由的,它在index.js中路由。
问题是我无法在任何地方访问历史记录对象。
我尝试的方法如下
1)home.js中的this.context.history.push(path)
- 无法访问未定义的上下文
2)home.js中的this.props.history.push(path)
- 无法访问未定义的道具
3)browserHistory.push(path)
- 现在不推荐使用
4)上面的方式 - _history2.default.push不是一个函数
我上面尝试的所有方法都不起作用。第二个是最奇怪的,因为我应该能够根据文档https://reacttraining.com/react-router/web/api/Route/Route-render-methods
在任何地方访问历史对象作为道具我知道以前的v2或v3访问历史记录的方式也已弃用。
那么知道如何在React Router v4中访问历史对象的人能回答这个问题吗?感谢。
答案 0 :(得分:24)
在我看来,您可能错过了withRouter
连接。这将使历史道具可用于此组件
...
import { withRouter } from 'react-router'
class Home extends Component {
functionMethod() {
const { history: { push } } = this.props;
doStuff();
push('/location');
}
...
}
export default withRouter(Home);
答案 1 :(得分:0)
使用钩子: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>
);
}
答案 2 :(得分:0)
我有一段时间这个问题了,它根本没有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);
`