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（'/城市概述）;

网址在浏览器中更改，但实际上并未导航到该路线...

Answer 1

我在我的组件中使用contextType作为react-router。

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

从 react-router 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>
        );
    }
}

如果您正在使用react-router版本＆lt; v2.0然后你应该使用像

这样的历史对象

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

然后像

一样使用它

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

这适用于hashHistory和browserHistory

使用hashHistory导航到路由

2 个答案: