react-router-redux: ne met pas à jour l'historique après la modification de l'itinéraire SECONDAIRE

Question

J'ai créé une application qui est largement basée sur react-boilerplate.

Mais pour une raison quelconque, après la modification de la deuxième route via l'action de redistribution LOCATION_CHANGE, l'objet d'historique n'est pas mis à jour avec le nouvel emplacement.

L'URL est modifiée pour correspondre au nouvel emplacement et le magasin Redux est mis à jour pour refléter le changement d'itinéraire, mais l'objet Historique affiche toujours l'emplacement précédent comme emplacement actuel. J'ai essayé de résoudre ce problème depuis des jours maintenant et je suis sûr que c'est quelque chose de trivial que je néglige complètement.

Voici mon routes.js fichier:

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

est ici le point d'entrée à l'application:

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

Toute idée de ce que pourrait être la cause? Merci beaucoup

Answer 1

Donc, après une tonne de maux de tête, j'ai compris le problème. Une faute de frappe

Ma position routeur sélectionnez était:

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

et la version correcte est:

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

qui ont manqué l '' sur locationBeforeTransition me coûter près de deux jours de temps perdu ...