导航到IndexRoute会导致所有将来的路径转换不再正确呈现

时间:2016-02-03 10:02:49

标签: reactjs react-router

导航我的应用程序路线工作正常然而有一个边缘情况 - 如果我导航到链接X,然后IndexRoute,然后链接Y我的组件返回链接X的内容,但道具都指向链接Y.所有进一步的尝试导航路线继续为Link X提供服务。

我不确定这是我的Reflux或React-Router配置的问题。值得一提的是,我使用的是React 0.14.15& React-Router 1.0.0

路线

ReactDOM.render((
  <IntlProvider>
    <Router history={createBrowserHistory()}>
      <Route path='/' component={App} > 
        <IndexRoute component={Home} />
        <Route path=":slug" component={Page} />
      </Route>
    </Router>
  </IntlProvider>
), document.getElementById('grandeur'));

页面组件 - 负责或处理路线

var Page = React.createClass({
mixins: [
        Router.History
    ],
getInitialState() {
    return {
        loading: !PageStore.loaded,
        page: PageStore.getInitialState()
    }
},
onPageChange: function(response) {
    this.setState({
        loading: false,
        page: response
    });
},
componentDidMount: function() {
    console.log('did mount')
    console.log(this.props)
    this.unsubscribe = PageStore.listen(this.onPageChange);
    if (!PageStore.loaded) PageActions.Load(this.props.params.slug);
},
componentWillUnmount: function() {
    console.log('unmounting')
    this.unsubscribe();
},
componentWillReceiveProps: function(nextProps) {
    console.log('received props')
    console.log(nextProps)
    console.log(this.props)
    PageActions.Load(nextProps.params.slug);
},
shouldComponentUpdate: function(nextProps, nextState) {
    console.log('should update')
    console.log(nextProps !== this.props)
    if (nextState !== this.state || nextProps !== this.props) {
        return true;
    } else {
        return false;
    }
},
pageContent: function() {
    if(!_.isEmpty(this.state.page) || this.state.loading == false){
        if(this.state.page.content.rendered.includes('[blog]')){
            return <Posts/>;
        }else{
            return <SinglePage page={this.state.page}/>;
        }
    }
},
render: function () {
    var content = this.pageContent();
    return (
        <div className="content">
            {content}
        </div>
    );
}
});

非常感谢任何意见或批评。

0 个答案:

没有答案