how to define a react router's IndexRoute when using dynamic routing

Question

What I have is a 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'));
};

and some settings with nested dynamic 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 is the parent component, which renders {this.props.children} react router passes. For example, if I navigate to /settings/general I'll have settings rendered, which in turn will render general as its child:

./routes/Settings/General.js

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

This is OK, but what I would like to do is defining the default child component Settings should render if navigating to /settings.

In short: is there a way to define something like IndexRoute when using dynamic routing?

have you tried using `getIndexRoute()` ? – QoP Sep 09 '16 at 21:51 — QoP, Sep 09 '16 at 21:51

score 1 · Accepted Answer · answered Sep 11 '16 at 18:20

1

You should use getIndexRoute - https://github.com/reactjs/react-router/blob/master/docs/API.md#getindexroutepartialnextstate-callback

answered Sep 11 '16 at 18:20

Vito

96
6

Link isn't available anymore, and I don't see any reference in React Router docs. – nacho_dh Jul 10 '17 at 18:49
1

@nacho_dh `Link` is now in [react-router-dom](https://www.npmjs.com/package/react-router-dom). But I don't see how that's related to this question. – Vito Jul 11 '17 at 19:48
actually, indexRoute expects an route object that looks like{ component: MyComponent }, since I realized that getComponent returns exactly that asyncronously, I used the getComponent method inside { }, and that solved my problem. – nacho_dh Jul 11 '17 at 20:45

score 0 · Answer 2 · answered Jul 12 '17 at 18:20

Since the method getIndexRoutes is deprecated, I noticed that indexRoute expects an object { component: SomeCompoent }, which is the schema of the object returned by getComponent, so I used getComponent to provide indexRoute as follows:

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

})

how to define a react router's IndexRoute when using dynamic routing

2 Answers2