react-router-redux：在SECOND路由更改后不更新历史记录

Question

我创建了一个主要基于react-boilerplate的应用。

但由于某些原因，在通过LOCATION_CHANGE redux操作更改第二个路径后，历史记录对象不会使用新位置进行更新。

更改URL以匹配新位置，并更新redux存储以反映路径更改，但历史记录对象仍将先前位置显示为当前位置。我已经试图解决这个问题好几天了，我确信这是微不足道的，我完全忽略了。

这是我的 routes.js 文件：

export function createRoutes(store) {
  // create reusable async injectors using getAsyncInjectors factory
  const { injectReducer, injectSagas } = getAsyncInjectors(store);


 // injectReducer('global', globalReducer);
  injectSagas(globalSagas);

  let routes = [
    {
      path: '/',
      name: 'dashboard',
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          require('App/views/Main/state/reducer'),
          require('App/views/Main'),
        ]);

        const renderRoute = loadModule(cb);

        importModules.then(([reducer, component]) => {
          injectReducer('dashboard', reducer.default);
          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
      indexRoute: {
        getComponent(nextState, cb) {
            const importModules = Promise.all([
              require('App/views/Main/views/Posts/state/reducer'),
              require('App/views/Main/views/Posts/state/sagas'),
              require('App/views/Main/views/Posts'),
            ]);

            const renderRoute = loadModule(cb);

            importModules.then(([reducer, sagas, component]) => {
            //  injectReducer('posts', reducer.default);
            //  injectSagas(sagas.default);
              renderRoute(component);
            });

            importModules.catch(errorLoading);
          }
      },
      childRoutes: [
        {
          path: 'library',
          name: 'library',
          getComponent(nextState, cb) {
            const importModules = Promise.all([
              require('App/views/Main/views/MediaItemLibrary'),
            ]);

            const renderRoute = loadModule(cb);

            importModules.then(([component]) => {
              renderRoute(component);
            });

            importModules.catch(errorLoading);
          },
        },
        {
          path: 'calendar',
          name: 'calendar',
          getComponent(nextState, cb) {
            const importModules = Promise.all([
              require('App/views/Main/views/Calendar'),
            ]);

            const renderRoute = loadModule(cb);

            importModules.then(([component]) => {
              renderRoute(component);
            });

            importModules.catch(errorLoading);
          },
        }
      ],
    }, 
    {
      path: '/start',
      name: 'start',
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          require('App/views/Start'),
        ]);

        const renderRoute = loadModule(cb);

        importModules.then(([component]) => {

          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
      indexRoute: {
        getComponent(nextState, cb) {
          const importModules = Promise.all([
            require('App/views/Start/views/Login/state/reducer'),
            require('App/views/Start/views/Login/state/sagas'),
            require('App/views/Start/views/Login'),
          ]);

          const renderRoute = loadModule(cb);

          importModules.then(([reducer, sagas, component]) => {
          //  injectReducer('login', reducer.default);
          //  injectSagas(sagas.default);

            renderRoute(component);
          });

          importModules.catch(errorLoading);
        },
      },
      childRoutes: [
        {
          path: '/signup',
          name: 'signup',
          getComponent(nextState, cb) {
            const importModules = Promise.all([
              require('App/views/Start/views/Signup/state/reducer'),
              require('App/views/Start/views/Signup/state/sagas'),
              require('App/views/Start/views/Signup'),
            ]);

            const renderRoute = loadModule(cb);

            importModules.then(([reducer, sagas, component]) => {
            //  injectReducer('signup', reducer.default);
            //  injectSagas(sagas.default);

              renderRoute(component);
            });

            importModules.catch(errorLoading);
          },
        }
      ],      
    }
  ];

  return {
    component: App,
    //indexRoute: { onEnter: (nextState, replace) => replace('/dashboard') },
    childRoutes: routes
  };
}

以下是该应用的入口点：

import 'babel-polyfill';

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { applyRouterMiddleware, Router, browserHistory, createBrowserHistory } from 'react-router';
import { useScroll } from 'react-router-scroll';
import { syncHistoryWithStore } from 'react-router-redux';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

//Needed for material-ui libarry
injectTapEventPlugin();

// import sanitize css
import 'sanitize.css/sanitize.css';

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';

export const historyObj = browserHistory;

// create redux store with history
const initialState = {};
const store = configureStore(initialState, historyObj);
// sync history and store, as the react-router-redux reducer
const history = syncHistoryWithStore(historyObj, store, {
    selectLocationState: makeSelectLocationState(),
});

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')
);

知道可能导致这种情况的原因是什么？非常感谢

Answer 1

因此经过一番头痛后，我发现了这个问题。一个奇怪的错字。

我的路由器位置选择是：

  // 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;
      }
  }

    export {
        makeSelectLocationState
    };

，正确的版本是：

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

错过了'location'eTransition让我花费了将近两天的时间......