Javascript 反应路由器重复;redux存储和历史记录未正确同步

Javascript 反应路由器重复;redux存储和历史记录未正确同步,javascript,reactjs,redux,react-router,react-router-redux,Javascript,Reactjs,Redux,React Router,React Router Redux,我正在尝试使用react router redux和Immutable.js还原程序设置路由 我使用syncHistoryWithStore设置了存储区,当我单击链接时,我可以看到正确的@@router/LOCATION\u CHANGE操作已被调度,存储区已正确更新为基本还原器路由键的位置信息,并且URL正在更改到正确的位置 但是新路径的子组件不会渲染。上一个路径的组件仍在屏幕上渲染。它们也不会被渲染,它们只是停留。当我查看传递给父组件的道具时,位置道具仍然显示前面的路线。这就好像redux操

我正在尝试使用react router redux和Immutable.js还原程序设置路由

我使用
syncHistoryWithStore
设置了存储区,当我单击
链接时,我可以看到正确的
@@router/LOCATION\u CHANGE
操作已被调度,存储区已正确更新为基本还原器路由键的位置信息,并且URL正在更改到正确的位置

但是新路径的子组件不会渲染。上一个路径的组件仍在屏幕上渲染。它们也不会被渲染,它们只是停留。当我查看传递给父组件的道具时,
位置
道具仍然显示前面的路线。这就好像redux操作被触发了,什么也没发生。没有传下新道具

这是我的app.js

reducers.js

有什么想法吗?几天来我一直在努力解决这个问题

import configureStore from './config.redux/store';

// import selector for 'syncHistoryWithStore'
import { makeSelectLocationState } from './config.redux/selectors';
// root app
import App from './App';

import { createRoutes} from 'config.routes/routes';

// create redux store with history
const initialState = {};
const store = configureStore(initialState, browserHistory);
// sync history and store, as the react-router-redux reducer
const history = syncHistoryWithStore(browserHistory, store, {
    selectLocationState: makeSelectLocationState(),
});
history.listen(location => {
    console.log(location);
});
const rootRoute = createRoutes(store);

ReactDOM.render(
    <Provider store={store}>
        <MuiThemeProvider>
            <Router
                history={history}
                routes={rootRoute}
                render={
                    // Scroll to top when going to new page, imitating default browser behavior
                    applyRouterMiddleware(useScroll())
                }
            />
        </MuiThemeProvider>
    </Provider>, document.getElementById('app')
);
const sagaMiddleware = createSagaMiddleware();
 const logger = createLogger();

 export default function configureStore(initialState = {}, history) {
    // Create store with middleware
    const middlewares = [
        sagaMiddleware,
        logger,
        routerMiddleware(history) 
    ];

    const enhancers = [
        applyMiddleware(...middlewares)
    ];

    // If Redux DevTools Extension is installed use it, otherwise use Redux compose
    /* eslint-disable no-underscore-dangle */
    const composeEnhancers =
        process.env.NODE_ENV !== 'production' &&
        typeof window === 'object' &&
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
          window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose;
    /* eslint-enable */

    const store = createStore(
        createReducer(),
        fromJS(initialState),
        composeEnhancers(...enhancers)
    );

    // Extensions
    store.runSaga = sagaMiddleware.run;
    store.asyncReducers = {}; // async reducer registry
    // Make reducers hot reloadable, see http://mxs.is/googmo
    /* istanbul ignore next */
    if (module.hot) {
        module.hot.accept('./reducers', () => {
            require('./reducers').then((reducerModule) => {
                const createReducers = reducerModule.default;
                const nextReducers = createReducers(store.asyncReducers);

                store.replaceReducer(nextReducers);
            });
        });
    }

    return store;
}
 // initial routing state
  const routeInitialState = fromJS({
      locationBeforeTransition: null,
  });

  // merge route into the global application state
  function routeReducer(state = routeInitialState, action) {
      switch(action.type) {
        case LOCATION_CHANGE:
            return state.merge({
                locationBeforeTransition: action.payload,
            });
        default:
            return state;
      }
  }

  /**
   * Create the main reducer with async loaded ones
   * 
   */
  export default function createReducer(asyncReducers) {
      return combineReducers({
          routing: routeReducer,
          auth: globalReducer,
          ...asyncReducers
      });
  }