React-redux-starter-kit: Add nested route example

[orielz]

Please add an example of how to implement nested route with parameters, it could be very helpful. Thanks.

[kolpav]

You can implement nested route exactly as index one. It all repeats itself as much as you want, child route can have more childRoutes and so on.

Very rough example

const SettingsLayout = ({ children }) => (
  <div>
    <SettingsMenu /> // With links to UserProfileSettings and ThemeSettings route
    <div>{children}</div> // Content of respective route
  </div>
)

export default store => ({
  path: '/settings',
  component: SettingsLayout,
  childRoutes: [
    UserProfileSettingsRoute(store), // <site>/settings/profile
    ThemeSettingsRoute(store) // <site>/settings/theme
  ]
})

If you have any questions feel free to ask.

[huangzhuolin]

grateful and agree with @kolpav , I came with the same problem these days.
The index route is an excellent self-explain example for nested routes.
In each route, several things should be mentioned.

1. the path that the route match.
2. the component that the route use to serve.
3. childRoutes, each childRoute is structured like this route itself.

After some practice, I found the solution and post it here, and any suggestions will be appreciate.

// routes/index.js

export const createRoutes = (store) => ({
  path        : '/',
  component   : CoreLayout,
  indexRoute  : Home,
  childRoutes : [
    CounterRoute(store),
    YourOtherLevelOneRoute(store),
    // ...
  ],
  onEnter: () => {
    store.dispatch(fetchMenu())
  },
})

For example, in Counter folder, you can define your components to serve that level and,
you can define routes folder in the same way as level one routes. In routes/Counter/index.js,
add childRoutes just as before.

export default (store) => ({
  path : 'counter',
  // add code here
  childRoutes: [
     LevelTwoRoute(store),
     OtherLevelTwoRotue(store),
  ],
  /*  Async getComponent is only invoked when route matches   */
  getComponent (nextState, cb) {
    /*  Webpack - use 'require.ensure' to create a split point
        and embed an async module loader (jsonp) when bundling   */
    require.ensure([], (require) => {
      /*  Webpack - use require callback to define
          dependencies for bundling   */
      const Counter = require('./containers/CounterContainer').default
      const reducer = require('./modules/counter').default

      /*  Add the reducer to the store on key 'counter'  */
      injectReducer(store, { key: 'counter', reducer })

      /*  Return getComponent   */
      cb(null, Counter)

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

The main idea is thinking just like using recursive way to define something. The example just for explain. Really hope this will help.

[davezuko]

See @kolpav 's and @huangzhuolin 's great explanations.