导航我的应用程序路线工作正常然而有一个边缘情况 - 如果我导航到链接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>
);
}
});
非常感谢任何意见或批评。