Question

我正在努力应对路由器。我想要的是建立一个带有登录链接的侧边菜单，它将在右侧窗格中显示Login comp。所以这是HTML：

<main id="buschat-app"></main>
<div id="menu"></div>

这就是我渲染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'));

现在，我有一个看起来像这样的菜单：

 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>
        )
    }
}

当页面加载时，我会看到右边的2个链接。当我点击登录链接时，我收到此控制台错误：

Uncaught TypeError: Cannot read property 'push' of undefined

我做错了什么？ react-router如何知道如何在右侧窗格中呈现登录comp？对不起，但我是新来的...

Answer 1

您在React Component中缺少上下文引用。

 static contextTypes = {router: PropTypes.object.isRequired};

参考：https://github.com/ReactTraining/react-router/issues/3024

Answer 2

删除

ReactDOM.render(<Buschat />, document.getElementById('buschat-app'))

并改为

ReactDOM.render((
    <Router history={hashHistory}>
        <Route path="/" component={Buschat}/>
        <Route path="login" component={Login}/>
    </Router>
), document.getElementById('buschat-app'));

在Buschat课程中，添加<Menu>组件。

我希望这有帮助！

react-router：无法读取未定义

2 个答案: