React-redux-starter-kit: Multiple Layouts

[brandonmikeska]

Hey guys, I am trying to figure out how to use the routes in the Plain Route format, I am used to JSX. First off, to get code splitting with async reducers and middleware, do you have to use the the Plain Route structure, or can it be achieved with JSX?

Second, we have two main layouts, and I am trying to figure out how I can call the createRoutes function, but make multiple top level routes with different Layouts, using the Plain Route structure. Any help would be great!

[amangeot]

Hello,
could you show the routes/structure you had in JSX which you want to be translated to plain routes ?

[brandonmikeska]

I don't have access to the specific code but it looks like the following example:

<Route` path="/" component={Containers.App}>
  <Route component={Containers.Layout1}>
    <IndexRoute component={Containers.Home}/>
    <Route path="about" component={Containers.About}/>
    <Route path="faq" component={Containers.Faq}/>
    <Route path="etc" component={Containers.Etc}/>
  </Route>

  <Route component={Containers.Layout2}>
    <Route path="products" component={Containers.Products}/>
    <Route path="gallery" component={Containers.Gallery}/>
  </Route>
</Route>

The trick was providing a route with no path, can this also be done with a Plain Route?

[davezuko]

I really don't have much to add to here, sorry. I suggest posting this either in StackOverflow or at least passing it along to the fine folks at react-router, since this is more of an implementation question than something specific to the starter kit. Sorry I couldn't be of more help, best of luck!

[eddiecantu]

https://gist.github.com/eddiecantu/7f15eaa0bb50dcf69c355226bc6c3b5f