реагировать и реагировать маршрутизаторы контекст неопределенной

Question

Я пытаюсь перейти от одного маршрута к другому, так, как я настроить мои маршруты:

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

тогда я стараюсь делают навигацию в этом классе:

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; 

Однако, когда это работает, я получаю «контекст Неизвестная ошибка» ...

Answer 1

Вам нужно т o привязать навигационную функцию к соответствующему контексту, так что ключевое слово this внутри него относится к классу React, а не к функции. Вы можете использовать функции стрелок, чтобы сделать то же самое.

navigate =() => { 

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

} 

или иначе связывают его в конструктор

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

Answer 2

Используйте "реквизит" вместо "контекста"

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