react multiple layouts (route roots) with plainroutes

Question

I'm trying to use plainroutes in order to create a react-router profile. I'm not convinced plainroutes is the most readable way to write code, but I'm trying to give it a fair shot since everyone seems excited about it. I'm having an extremely frustrating time trying to define multiple layouts for my components. Take the following working code:

Working plainroutes example

export const createRoutes = (store) => ({
  path        : '/',
  component   : CoreLayout,
  childRoutes : [
    LoginView(store),
    SignupView(store),
    Activate(store),
    ForgotPw(store),
    ConfirmReset(store)
  ]
}
)

Nothing unexpected happening here. The actual routes are built into the views using the following structure (LoginView for example):

Directory structure of childRoute objects

-/Login
--index.js
--/components
--Loginview.jsx
--Loginview.scss

The index.js files contain little route blocks looking like this:

Example childroute

export default (store) => ({
  path : 'activate',
  component: ActivateView
})

I'll also include the source of the Login component below, as referred to above. Please note I did try adding path: 'login' to this component but it made no difference.

Login import

export default {
  component: LoginView
}

When a user visits /login they see the login component. Easy right? Yep. Now you might notice all those routes look like a group of authentication-related views. I want those views to share a layout. In this case, CoreLayout. That's also working with the above code.

Next step is that I want to add a user dashboard for after users login. This dashboard needs to use a different layout which I'm calling LoggedIn. Naturally, I expected that adding another json object with a similar pattern could accomplish this, so I produced the below code:

Broken multiple layout attempt

export const createRoutes = (store) => ({
  path        : '/login',
  component   : CoreLayout,
  indexRoute  : Login,
  childRoutes : [
    SignupView(store),
    Activate(store),
    ForgotPw(store),
    ConfirmReset(store)
  ]
},
  {
    path        : '/',
    component   : LoggedIn,
    indexRoute  : Home,
    childRoutes : [
    ]
  }
)

The above code does not work as intended. The only path that works are that paths in the second element of the set (the one with the / route). I tried moving some routes from the first element down and the do work when put in the second element... but this obviously doesn't solve my problem.

The most frustrating thing to me is that it seems to me as if I am following the SO posts which deal with this, though its a little difficult to tell for sure because they don't use plainroutes. I'm linking one here for reference.

score 2 · Accepted Answer · answered Feb 03 '17 at 08:32

Typing this out actually helped me work through the problem. Nothing like a good rubber duck. It looks like I misunderstood the nature of the router object. Apparently it needs to be a legitimate object, where I was under the impression it was accepting a collection. Thus, you need to define everything within the scope of a single parent. See below for how I solved it for my particular example:

export const createRoutes = (store) => (
  {
    path        : '/',
    component   : CoreLayout,
    indexRoute  : Home,
    childRoutes : [
      {
        path        : '/',
        component   : AuthLayout,
        childRoutes : [
          LoginView(store),
          SignupView(store),
          Activate(store),
          ForgotPw(store),
          ConfirmReset(store)
        ]
      },
      {
        path        : '/admin',
        component   : LoggedIn,
        indexRoute  : Home,
        childRoutes : [
        ]
      }
    ]
  }

)

react multiple layouts (route roots) with plainroutes

1 Answers1