react-router: Cannot read property 'push' of undefined

Question

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. so this is the HTML:

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

This is how i render the Buschat main comp and the 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. 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? sorry but im new to this...

Answer 1

You are missing context reference in React Component.

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

Ref: https://github.com/ReactTraining/react-router/issues/3024

Answer 2

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.

I hope this helps!