react-router导航无法正常工作

时间:2016-12-06 09:47:20

标签: javascript reactjs react-router

我试图导航到这样的不同路线:

import React from 'react';
import { browserHistory } from 'react-router'

class MyComponent extends React.Component {

    navigate () {

        browserHistory.push('/some-page')

    }

    render () {
        return (            
            <button onClick={this.navigate.bind(this)} />Navigate</button>
        );
    }

}

export default MyComponent;

我的路线设置:

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path='/' component={Layout}>
            <IndexRoute component={Home}></IndexRoute>
            <Route path='/some-page' component={SomePage}></Route>
        </Route>
    </Router>,
    document.getElementById('app')
);

当这次运行时,浏览器中的URL确实会发生变化,但这就是所有发生的事情。我实际上没有被引导到那条路线。我有什么遗失的吗?

1 个答案:

答案 0 :(得分:2)

你需要保持一致;您为路由器声明了hashHistory,但使用browserHistory进行实际路由。

哈希历史记录会在“#/”之后附加路径,browserHistory使用最新的HTML5推送状态实际更改URL而不发出任何请求。

每个人都按照自己的意愿行事,但你正在倾听某事并说出别的话;)