Перейдите к маршруту, используя hashHistory

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 GameOne from './pages/GameOne/GameOne'; 
import PageTwo from './pages/PageTwo/PageTwo'; 
import PageThree from './pages/PageThree/PageThree'; 

ReactDOM.render(
    <Router history={hashHistory}> 
     <Route path='/' component={Layout}> 
      <IndexRoute component={Home}></IndexRoute> 
      <Route path='/city-overview' component={CityOverview}></Route> 
      <Route path='/game-one' component={GameOne}></Route> 
      <Route path='/page-two' component={PageTwo}></Route> 
      <Route path='/page-three' component={PageThree}></Route> 
     </Route> 
    </Router>, 
    document.getElementById('app') 
); 

Но я изо всех сил, чтобы перейти с одной страницы на другую, например:

// Home.js hashHistory.push ('/ city-overview);

изменения URL в браузере, но это на самом деле не перейти к этому маршруту ...

Answer 1

Я использую contextType в моем компоненте для среагировать-маршрутизатора.

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

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

this.context.router.replace({ 
    pathname : '/'/city-overview', 
    state : { 
     // some state data if you need to pass 
     // key : val 
    } 
}); 

Answer 2

Начиная с реагируют-маршрутизатор 2 вы не должны использовать history объект, чтобы сделать навигацию, вы должны использовать вместо этого маршрутизатор.

static contextTypes: { 
    router: React.PropTypes.object.isRequired 
} 

, а затем перемещаться как

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

Вы должны использовать его как

import React, { PropTypes } from 'react'; 

class Home extends React.Component { 
    handleClick =() =>{ 
     this.context.router.push('/city-overview'); 
    } 
    static contextTypes = { 
     router: React.PropTypes.object 
    } 
    render() { 
     return ( 
      <div className="flex-container-center"> 
       <button type="button" onClick={this.props.handleClick}>submit</button> 
      </div> 
     ); 
    } 
} 

Если ваш используете реагировать-маршрутизатор версии < v2.0, то вы должны использовать объект истории, как

static contextTypes: { 
    history: React.PropTypes.object.isRequired 
} 

, а затем использовать его как

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

Это работает как для hashHistory и browserHistory