React-Router: getChildRoutes nicht in verschachtelten PlainRoute

Question

Als Referenz verwende ich das React-Redux Starter Kit (https://github.com/davezuko/react-redux-starter-kit) als Basisprojektlayout.

Ive erhielt eine Route namens TSP, und ich bin mit getComponent und redux connect() eine Minderer auf einem Container-Komponente zu injizieren, die ich hoffe, ich werde children auf in den Requisiten passieren.

Die getChildRoutes in der TSP-Route-Definition wird nie aufgerufen.

Root-Router Config:

import ApplicationLayout from '../layouts/ApplicationLayout'; 
import Home from './Home'; 

export const createRoutes = (store) => { 
    const routes = { 
    path: '/', 
    component: ApplicationLayout, 
    indexRoute: Home, 
    getChildRoutes (location, next) { 
     require.ensure([], (require) => { 
     next(null, [ 
      require('./TSP').default(store), 
      require('./Home').default, 
     ]); 
     }); 
    } 
    }; 

    return routes; 
}; 

export default createRoutes; 

Nested Router Config (TSP):

import { injectReducer } from '../../store/reducers'; 
import Overview from './routes/Overview'; 

export default (store) => ({ 
    path: '/tsp/:id', 
    indexRoute: Overview, 
    getComponent (nextState, next) { 
    require.ensure([ 
     './containers/TSPContainer', 
     './modules/tsp' 
    ], (require) => { 
     const TSP = require('./containers/TSPContainer').default; 
     const reducer = require('./modules/tsp').default; 

     injectReducer(store, { key: 'tsp', reducer }); 
     next(null, TSP); 
    }); 
    }, 
    getChildRoutes (location, next) { 
    debugger 
    require.ensure([], (require) => { 
     next(null, [ 
     // Provide store for async reducers and middleware 
     require('./routes/Offers').default(store), 
     require('./routes/Reviews').default(store) 
     ]); 
    }); 
    } 
}); 

Ich bin nie auf die debugger innerhalb getChildRoutes bekommen.

Jede Hilfe wird geschätzt, und wenn es noch weitere Dateien zu sehen gibt, kann ich sie hinzufügen.

Answer 1

Haben Sie die Routendefinitionen ./TSP und ./Home synchron geladen? Wenn nicht, glaube ich nicht require.ensure würde funktionieren, ohne dass Sie diese Module als Abhängigkeiten angeben.

So:

getChildRoutes (location, next) { 
    require.ensure([ 
    './TSP', 
    './Home' 
    ], (require) => { 
    next(null, [ 
     require('./TSP').default(store), 
     require('./Home').default, 
    ]); 
    }); 
} 

Answer 2

es herausgefunden. Mein IndexRoute in dem obigen TSP verschachtelten Fräser Config war eine Funktion, nicht ein Objekt (die ich reagieren-Router gehe davon erwartet indexRoute ein Objekt zu sein, bevor getChildRoutes Brennen.)

Die Lösung, die beschlossen, die routeConfig zuweisen war für Overview bis indexRoute.

TSP/index.js

import { injectReducer } from '../../store/reducers'; 

export default (store) => ({ 
    path: '/tsp/:id', 
    indexRoute: require('./routes/Overview').default(store), 
    getComponent (nextState, next) { 
    require.ensure([ 
     './containers/TSPContainer', 
     './modules/tsp' 
    ], (require) => { 
     const TSP = require('./containers/TSPContainer').default; 
     const reducer = require('./modules/tsp').default; 

     injectReducer(store, { key: 'tsp', reducer }); 
     next(null, TSP); 
    }); 
    }, 
    getChildRoutes (location, next) { 
    require.ensure([], (require) => { 
     next(null, [ 
     // Provide store for async reducers and middleware 
     require('./routes/Offers').default(store), 
     require('./routes/Reviews').default(store) 
     ]); 
    }); 
    } 
}); 

TSP/routes/Overview/index.js

export default (store) => ({ 
    getComponent (nextState, next) { 
    require.ensure([ 
     './components/OverviewView' 
    ], (require) => { 
     const Overview = require('./components/OverviewView').default; 
     next(null, Overview); 
    }); 
    } 
});