为什么我的状态在通过链接导航到路线时与按下后退按钮时不同

Question

我的redux存储中有一个连接到appPageData状态的主Layout组件。默认状态如下：

const initialSate = {
appPageData: null,
fetching: false,
fetched: false,
error: null,
};

我的布局组件如下所示：

import React, { Component, cloneElement, PropTypes } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
//Components
import Footer from '../components/Footer';
import Header from '../components/Header';
//Actions
import { fetchPage } from '../actions/appPageActions';
class Layout extends Component {
componentWillMount() {
const {pathname, query} = this.props.location;
this.props.fetchPage(pathname, query);    
}
componentWillReceiveProps(nextProps) {
const {pathname, query} = this.props.location;
const {pathname: nextPathname, query: nextQuery} = nextProps.location;
if( pathname !== nextPathname || query !== nextQuery) {
this.props.fetchPage(nextPathname, nextQuery);
}
}
render() {
const { appPageData, location, fetched, error } = this.props;
return (
<div>
<Header json={header}/>
<section class="container" id="content" role="main">
<div class="row">
<div class="col-md-12">
{cloneElement(this.props.children, { appPageData: appPageData, fetched: fetched, error: error })}
</div>
</div>
</section>
<Footer json={footer}/>
</div>
);
}
}
// Connect the component to the Redux store:
function mapStateToProps(state) {
return {
appPageData: state.appPageData.appPageData,
fetched: state.appPageData.fetched
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({
fetchPage: fetchPage
}
, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(Layout);

我将提取的道具传递给子组件，以便显示加载指示器或显示组件。所有这些都很好，如果在菜单中我使用react routerLinks进行导航，但是，当我按下后退按钮时，子组件会刹车，因为即使我的appPageData状态已重置为初始状态，我的布局也会将属性"提取"为true

我的appPageReducer看起来像这样：

const initialSate = {
appPageData: null,
fetching: false,
fetched: false,
error: null,
};
export default function reducer(state = initialSate, action) {
const {type, payload} = action;
switch (type) {
case '@@router/LOCATION_CHANGE': {
return initialSate;
}
case 'FETCH_PAGE': {
return {...state, fetching: true, fetched: false};
}
case 'FETCH_PAGE_REJECTED': {
return {...state, fetching: false, error: payload};
}
case 'FETCH_PAGE_FULFILLED': {
return {
...state,
appPageData: payload,
fetching: false,
fetched: true,
error: null
};
}
}
return state;
}

编辑：我的app.js看起来像这个

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';
import { Provider } from 'react-redux';
import { syncHistoryWithStore } from 'react-router-redux';
//Main store of the app
import store from './stores/store';
//Main layout component of the app
import Layout from './pages/Layout';
import Data from './pages/Data';
import Login from './pages/Auth/Login';
// Create an enhanced history that syncs navigation events with the store
const history = syncHistoryWithStore(browserHistory, store);
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<Route path={appIndexURL} component={Layout}>
<Route path={'**/**/a/data/**'} component={Data}/>
<Route path={'**/**/a/login'} component={Login}/>
</Route>
</Router>
</Provider>,
app);

正如你所看到的，我正在听"@@router/LOCATION_CHANGE"来重置状态。在redux开发人员控制台中，我可以正确地看到状态的变化。无论使用"链接"还是"返回"按钮，操作的显示方式或状态的更新方式都没有区别。这是一样的，但是，我的Layout组件看它的方式不同。

正如人们所想的那样，在状态更新之前，只要按下"后退"按钮，布局就会重新渲染？这有什么原因吗？

Answer 1

我的所有代码都是正确的。在我更新了react路由器之后，一切都如预期的那样工作。