Javascript 将多个布局（路由根）与普通路由进行反应

我正在尝试使用plainroutes来创建react路由器配置文件。我不相信plainroutes是编写代码的最具可读性的方式，但我尝试公平地使用它，因为每个人似乎都对此感到兴奋。我在尝试为我的组件定义多个布局时遇到了极大的挫折。采用以下工作代码：

工作路径示例

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

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

这里没有什么意外的事。使用以下结构（例如LoginView）将实际管线内置到视图中：

childRoute对象的目录结构

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

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

示例儿童路线

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

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

我还将在下面包括

登录

组件的源代码，如上所述。请注意，我确实尝试将

路径：“login”

添加到此组件，但没有任何区别

登录导入

export default {
  component: LoginView
}

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

当用户访问

/login

时，他们会看到登录组件。简单，对吗？是的。现在，您可能会注意到所有这些路由看起来都像一组与身份验证相关的视图。我希望这些视图共享一个布局。在这种情况下，

coreloayout

。这也适用于上述代码

下一步是，我想在用户登录后为其添加一个用户仪表板。此仪表板需要使用不同的布局，我正在调用

LoggedIn

。当然，我希望添加另一个具有类似模式的json对象可以实现这一点，因此我生成了以下代码：

中断的多布局尝试

export default {
  component: LoginView
}

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帖子，尽管这有点难以确定，因为它们不使用普通路线。我正在链接一个以供参考

把这个打出来实际上帮助我解决了这个问题。没有什么能比得上一只好的橡皮鸭。看起来我误解了路由器对象的本质。显然，它需要是一个合法的对象，在我的印象中，它正在接受一个集合。因此，您需要定义单亲范围内的所有内容。下面是我如何解决这个问题的具体例子：

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

)

---

把这个打出来实际上帮助我解决了这个问题。没有什么能比得上一只好的橡皮鸭。看起来我误解了路由器对象的本质。显然，它需要是一个合法的对象，在我的印象中，它正在接受一个集合。因此，您需要定义单亲范围内的所有内容。下面是我如何解决这个问题的具体例子：

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

)