[英]react-router: Cannot read property 'push' of undefined
i'm struggling with react router. 我正在努力应对路由器。 all i want is to build a side menu with a link to login that will show the Login comp in the right pane.
我想要的是建立一个带有登录链接的侧边菜单,它将在右侧窗格中显示Login comp。 so this is the HTML:
所以这是HTML:
<main id="buschat-app"></main>
<div id="menu"></div>
This is how i render the Buschat main comp and the Router comp. 这就是我渲染Buschat主comp和Router comp的方法。
class Buschat extends React.Component {
constructor() {
super()
}
render() {
return (
<div className="container-fluid">
<div className="row">
<div className="col-sm-2">
<Menu />
</div>
<div className="col-sm-10">
<Main />
</div>
</div>
</div>
)
}
}
ReactDOM.render(<Buschat />, document.getElementById('buschat-app'))
ReactDOM.render((
<Router history={hashHistory}>
<Route path="/" component={Default}/>
<Route path="login" component={Login}/>
</Router>
), document.getElementById('menu'));
now, in i have the Menu comp that looks like that: 现在,在我有菜单组件看起来像这样:
import React from 'react';
import { Link } from 'react-router'
export default class Menu extends React.Component {
render() {
return (
<div>
<nav className="navbar navbar-light bg-faded">
<Link to="/">Default</Link>
<Link to="/login">Login</Link>
</nav>
</div>
)
}
}
when the page is load i see the 2 links on the right. 当页面加载时,我会看到右边的2个链接。 when i click on the login link, i get this console error:
当我点击登录链接时,我收到此控制台错误:
Uncaught TypeError: Cannot read property 'push' of undefined
what im doing wrong? 我做错了什么? how react-router knows to render login comp on the right pane?
react-router如何知道如何在右侧窗格中呈现登录comp? sorry but im new to this...
对不起,但我是新来的......
You are missing context reference in React Component. 您在React Component中缺少上下文引用。
static contextTypes = {router: PropTypes.object.isRequired};
Ref: https://github.com/ReactTraining/react-router/issues/3024 参考: https : //github.com/ReactTraining/react-router/issues/3024
Remove 去掉
ReactDOM.render(<Buschat />, document.getElementById('buschat-app'))
and change to 并改为
ReactDOM.render((
<Router history={hashHistory}>
<Route path="/" component={Buschat}/>
<Route path="login" component={Login}/>
</Router>
), document.getElementById('buschat-app'));
in Buschat
class, add the <Menu>
component. 在
Buschat
课程中,添加<Menu>
组件。
I hope this helps! 我希望这有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.