react-router: Kann Eigenschaft 'push' von undefined nicht lesen

Question

Ich kämpfe mit Reagieren Router. alles, was ich will, ist ein Side-Menü mit einem Link zum Login zu bauen, dass die Login-Comp im rechten Fensterbereich angezeigt wird. so ist dies der HTML:

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

Dies ist, wie ich den Buschat Haupt-comp und den Router comp machen.

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')); 

jetzt, in das Menü comp haben, die so aussieht:

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

, wenn die Seite Last i die 2 Links auf der rechten Seite zu sehen ist. , wenn ich auf dem Login-Link klicken, i diese Konsole Fehler:

Uncaught TypeError: Cannot read property 'push' of undefined 

was im falsch? Wie reagiert der react-router, um Login comp im rechten Fensterbereich darzustellen? Entschuldigung, aber ich bin neu zu diesem ...

Answer 1

Sie fehlen Kontextreferenz in React Component.

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

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

Answer 2

entfernen

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

und wechseln Sie in

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

in Buschat Klasse, fügen Sie die <Menu> Komponente.

Ich hoffe, das hilft!