React 路由引发错误：无法读取浏览器路由器未定义的属性'push'

Question

我有一个代码，我需要在单击按钮后显示主页。当我在其他页面中调用相同的路由"/Sub"时，它正在工作。 但在这里它抛出无法读取未定义的属性"推送">

路线.js ：

import React from 'react';
import { Switch, BrowserRouter, Route } from 'react-router-dom';
const Routes = () => (
<BrowserRouter>
<Switch>
<Route exact path='/' component={Addpage} />
<Route path='/New' component={Details} />
<Route path='/Sub' component={Displaydata} />
</Switch>
</BrowserRouter>
) 
export default Routes;

这是UI代码：

class Displaypage extends Component {
constructor(props) {
super(props);
this.state = {
Pageid: 1
}
this.handleSubmit = this.handleSubmit.bind(this);
this.handleAddNew = this.handleAddNew.bind(this);
}
handleSubmit = s => {
s.preventDefault();
const Pageid = this.state.Pageid;
this.props.history.push({
pathname: "/Sub",
state: {
Pageid: this.state.Pageid;
}
});
}
render() {
const submitbutton = <button onClick={this.handleSubmit}>Submit</button>
return (
<div >
{submitbutton}
</div>
);
}
}
export default Displaypage;

Answer 1

你用 https://reacttraining.com/react-router/web/api/withRouter 来定义你的作曲了吗？

import { withRouter } from "react-router"
class Displaypage extends Component {
constructor(props) {
super(props);
this.state = {
Pageid:1
}            
this.handleSubmit=this.handleSubmit.bind(this);
this.handleAddNew = this.handleAddNew.bind(this);
}
handleSubmit = s => {
s.preventDefault();
const Pageid = this.state.Pageid;
this.props.history.push({
pathname: "/Sub",
state: {
Pageid: this.state.Pageid;
}
});
}
render() {
const submitbutton = <button onClick={this.handleSubmit}>Submit</button>
return (
<div >                              
{submitbutton}              
</div>
);
}
}   
const DisplaypageWithRouter = withRouter(Displaypage)
export default DisplaypageWithRouter;

Answer 2

我不确定这是否是拼写错误，但是组件名称是Displaypage，而路由的组件是Displaydata？

除此之外，我没有看到任何错误，应该按原样工作。正如其他答案所暗示的那样，Router下的直接组件不需要withRouter。

**路线道具 所有三种渲染方法都将传递相同的三个路由道具

火柴 位置 历史**