reagieren und reagieren-Router Kontext undefiniert

Question

Ich versuche, von einer Strecke zur anderen zu navigieren, wie ich habe Setup meine Routen:

App.js:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, IndexRoute, hashHistory } from 'react-router'; 

// Pages 
import Layout from './pages/Layout/Layout'; 
import Home from './pages/Home/Home'; 
import CityOverview from './pages/CityOverview/CityOverview'; 
import Game from './pages/Game/Game'; 

ReactDOM.render(
    <Router history={hashHistory}> 
     <Route path='/' component={Layout}> 
      <IndexRoute component={Home}></IndexRoute> 
      <Route path='/city-overview' component={CityOverview}></Route> 
      <Route path='/game' component={Game}></Route> 
     </Route> 
    </Router>, 
    document.getElementById('app') 
); 

ich dann versuchen, die Navigation in dieser Klasse tun:

import React from 'react'; 

class MyComponent extends React.Component { 

    constructor() { 
     super(); 
     this.state = { 
      email : '', 
      password : '' 
     }; 
    } 

    render() { 
     // ... 
    } 

    navigate() { 

     this.context.router.push('/city-overview'); 

    } 

} 

MyComponent.contextTypes = { 
    router: React.PropTypes.object.isRequired 
}; 

export default MyComponent; 

jedoch, wenn dieser läuft, bekomme ich einen „Kontext undefiniert Fehler“ ...

Answer 1

Sie benötigen t o Binden Sie die Navigationsfunktion an den entsprechenden Kontext, sodass sich das Schlüsselwort this auf die React-Klasse und nicht auf die Funktion bezieht. Sie können Pfeilfunktionen verwenden, um das Gleiche zu tun.

navigate =() => { 

    this.context.router.push('/city-overview'); 

} 

oder sonst binden es im Konstruktor

constructor() { 
     super(); 
     this.state = { 
      email : '', 
      password : '' 
     }; 
     this.navigate = this.navigate.bind(this); 
    } 

Answer 2

Use "Requisiten" anstelle von "Kontext"

this.props.router.push("city-overview");