What if I wanted to have bundle per every single route

[vojtatranta]

Because if I write it like this

export default {
  path: '/',
  component: App,
  indexRoute: {
    component: Bio
  },
  getChildRoutes(location, cb) {
    return [
      require.ensure([], (require) => cb(null, [require('./blog')])),
      require.ensure([], (require) => cb(null, [require('./contact')])),
      require.ensure([], (require) => cb(null, [require('./about')])),
    ]
  },
}

and I go for example to route /blog, all the extra 2 bundles with /contact and /about download.
And I want to download these only when they are clicked. What am I doing wrong? Should I nest that require.ensure calls?

[vojtatranta]

Alright, I can if it out, but I really don't like such solution, any ideas?
This is what I've got so far:

export default {
  path: '/',
  component: App,
  indexRoute: {
    component: Bio
  },
  getChildRoutes(location, cb) {
    switch (location.pathname) {
      case '/blog':
        return [ require.ensure([], require => cb(null, [ require('./blog') ])) ]
      case '/contact':
        return [ require.ensure([], require => cb(null, [ require('./contact') ])) ]
      case '/o-webu':
        return [ require.ensure([], require => cb(null, [ require('./about') ])) ]
    }
  },
}

[gocreating]

@vojtatranta You should take a look at react-router's huge-apps example.
I also use it in my boilerplate.

[tconroy]

👍 to this.. Curious to see how I'd implement this with this server-side example. the huge-apps example doesn't contain the server logic.

@vojtatranta did you find a solution that worked for you? I tried your example with a switch statement but it didn't seem to work right for me, the module wouldn't compile correctly.