使用 plainroutes 反应多个布局（路由根）答案

【问题标题】：react multiple layouts (route roots) with plainroutes使用 plainroutes 反应多个布局（路由根）
【发布时间】：2017-02-03 07:42:07
【问题描述】：

我正在尝试使用 plainroutes 来创建 react-router 配置文件。我不相信 plainroutes 是编写代码的最易读的方式，但我试图给它一个公平的机会，因为每个人似乎都对此感到兴奋。尝试为我的组件定义多个布局时，我感到非常沮丧。获取以下工作代码：

使用普通路由示例

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

这里没有意外发生。实际路线使用以下结构（例如 LoginView）内置到视图中：

childRoute对象的目录结构

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

index.js 文件包含如下所示的小路由块：

子路由示例

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

我还将在下面包含Login 组件的来源，如上所述。请注意，我确实尝试将 path: 'login' 添加到此组件，但没有任何区别。

登录导入

export default {
  component: LoginView
}

当用户访问/login 时，他们会看到登录组件。容易吧？是的。现在您可能会注意到所有这些路由看起来都像是一组与身份验证相关的视图。我希望这些视图共享一个布局。在这种情况下，CoreLayout。这也适用于上面的代码。

下一步是我想在用户登录后添加用户仪表板。这个仪表板需要使用不同的布局，我称之为LoggedIn。当然，我希望添加另一个具有类似模式的 json 对象可以完成此操作，因此我生成了以下代码：

多次布局尝试失败

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 : [
    ]
  }
)

上面的代码没有按预期工作。唯一有效的路径是集合的第二个元素中的路径（带有/ 路由的路径）。我尝试从第一个元素向下移动一些路线，并在放入第二个元素时执行工作......但这显然不能解决我的问题。

对我来说最令人沮丧的是，在我看来，好像我正在关注处理此问题的 SO 帖子，尽管有点难以确定，因为它们不使用普通路由。我正在链接一个here 以供参考。

【问题讨论】：

标签： javascript reactjs layout react-router

【解决方案1】：

输入这个实际上帮助我解决了这个问题。没有什么比得上好的橡皮鸭了。看起来我误解了路由器对象的性质。显然它需要是一个合法的对象，我的印象是它正在接受一个集合。因此，您需要在单亲范围内定义所有内容。请参阅下文，了解我如何针对我的特定示例解决它：

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 : [
        ]
      }
    ]
  }

)

【讨论】：