ReactRouter 2.0.1 Zusammenhang mit Links fehlt

Question

I react-router Version 2.0.1 mit folgenden Datei bin mit:

import React, {Component}    from 'react' 
import {render}      from 'react-dom' 
import {Link, Router, Route, browserHistory} from 'react-router' 

class Home extends Component { 

    render() { 
    return (
     <div> 
     <h1>Home</h1> 
     </div> 
    ) 
    } 

} 

class About extends Component { 

    render() { 
    return (
     <div> 
     <h1>About</h1> 
     </div> 
    ) 
    } 

} 

class Contact extends Component { 

    render() { 
    return (
     <div> 
     <h1>Contact</h1> 
     </div> 
    ) 
    } 

} 

render(
    <section> 
    <Link to="/">Home</Link> 
    <Link to="/about">About</Link> 
    <Link to="/contact">Contact</Link> 
    <Router history={browserHistory}> 
     <Route path="/" component={Home} /> 
     <Route path="/about" component={About} /> 
     <Route path="/contact" component={Contact} /> 
    </Router>, 
    </section>, 
    document.querySelector('main') 
) 

Wenn ich auf einen der Links klicken, erhalte ich:

ReactErrorUtils.js:71 Uncaught TypeError: Cannot read property 'push' of undefined 
handleClick @ Link.js:124 
ReactErrorUtils.invokeGuardedCallback @ ReactErrorUtils.js:71 
executeDispatch @ EventPluginUtils.js:79 
executeDispatchesInOrder @ EventPluginUtils.js:102 
executeDispatchesAndRelease @ EventPluginHub.js:43 
executeDispatchesAndReleaseTopLevel @ EventPluginHub.js:54 
forEachAccumulated @ forEachAccumulated.js:23 
processEventQueue @ EventPluginHub.js:259 
runEventQueueInBatch @ ReactEventEmitterMixin.js:18 
handleTopLevel @ ReactEventEmitterMixin.js:34 
handleTopLevelWithoutPath @ ReactEventListener.js:93 
handleTopLevelImpl @ ReactEventListener.js:73 
perform @ Transaction.js:136 
batchedUpdates @ ReactDefaultBatchingStrategy.js:62 
batchedUpdates @ ReactUpdates.js:94 
dispatchEvent @ ReactEventListener.js:204 

mit Link.js:124:

this.context.router.push(_location); 

Irgendeine Idee, die ich vermisse?

Edit: vollständiges Beispiel den Sie können dieses Klons gist

Answer 1

this.context.router.push die Funktion ist, die fehlschlägt.

Also entweder die Router-Eigenschaft auf dem Kontextobjekt oder Kontext nicht gesetzt werden wird, nicht bestanden wird ....

Ich sehe, dass Sie Link-Komponenten als Peers (keine Kinder) der Router-Komponente setzen .

Kontext() ist in der Komponentenstruktur weitergegeben und ich vermute, dass, weil die Links außerhalb sind, sie nicht in der Lage sind, den entsprechenden Kontext zu finden.

Probieren Sie die App Komponentenbaum