javascript - 使用 hashHistory 导航到路由

Question

我在我的 React 应用程序中设置了我的路线，如下所示:

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

但是我很难从一个页面导航到另一个页面，例如:

//主页.js hashHistory.push('/城市概览);

浏览器中的 URL 发生了变化，但它实际上并没有导航到该路由...

Answer 1

我在我的 react-router 组件中使用 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
    }
});