wie definiert einen Router IndexRoute reagieren, wenn dynamischen Routing mit

Question

Was ich habe, ist eine root route Definition:

const rootRoute = { 
    childRoutes: [{ 
     path: '/', 
     component: require('./screens/Container'), 
     appGlobalVars: appGlobalVars, 
     childRoutes: [ 
      require('./routes/ListApps'), 
      require('./routes/Settings'), 
      require('./routes/Profile') 
     ] 
    }] 
}; 


var runApp = (appGlobalVars) => { 
    var routes = (
     <Provider store={store}> 
      <Router history={ history } routes={rootRoute} /> 
     </Provider> 
    ); 

    render(routes, document.getElementById('app')); 
}; 

und einige Einstellungen mit verschachteltem dynamischem Routing:

./routes/Settings/index.js :

module.exports = { 
    path: 'settings', 
    getComponent(nextState, cb) { 
     require.ensure([], (require) => { 
      cb(null, require('../../screens/AppSettings')) 
     }) 
    }, 
    getChildRoutes(partialNextState, cb) { 
     require.ensure([], (require) => { 
      cb(null, [ 
       require('./General'), 
       require('./Users') 
      ]) 
     }) 
    }, 
}; 

/settings ist die übergeordnete Komponente, die {this.props.children} reagieren Router leitet macht. Zum Beispiel, wenn ich zu /settings/general navigieren werde ich settings gemacht, was wiederum general als Kind machen wird:

./routes/Settings/General.js

module.exports = { 
    path: 'general', 
    getComponent(nextState, cb) { 
     require.ensure([], (require) => { 
      cb(null, require('../../screens/AppSettings/General')) 
     }) 
    } 
}; 

Das OK ist, aber Was ich tun möchte, ist die Definition der Standard-Kind-Komponente Settings sollte rendern, wenn zu /settings navigieren.

Kurz gesagt: Gibt es eine Möglichkeit, so etwas wie IndexRoute zu definieren, wenn dynamisches Routing verwendet wird?

Answer 1

sollten Sie verwenden getIndexRoute - https://github.com/reactjs/react-router/blob/master/docs/API.md#getindexroutepartialnextstate-callback

Answer 2

Da die Methode getIndexRoutes veraltet ist, bemerkte ich, dass indexRoute ein Objekt erwartet {Komponente: SomeCompoent}, die das Schema des von GetComponent zurückgegebene Objekt ist, so habe ich GetComponent zu Stellen Sie indexRoute wie folgt bereit:

export default (store) => ({ 
    path : 'shops', 
    childRoutes: [ 
    EditShopRoute(store), 
    ], 
    component: EntityLayout, // this renders always 
    indexRoute: { // this renders only when route matches exactly /shops 
    getComponent (nextState, cb) { 
    require.ensure([], (require) => { 
     const Shops = require('./containers/ShopsContainer').default 
     const reducerShop = require('./modules/shops').default 
     injectReducer(store, { key: 'shops', reducer: reducerShop }) 

     cb(null, Shops) 

    /* Webpack named bundle */ 
    }, 'shops') 
    } } 

})