javascript - 使用 plainroute react 多个布局(路由根)

Question

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

工作普通路由示例

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

这里没有发生什么意外的事情。实际路由使用以下结构构建到 View 中(例如 LoginView):

childRoute对象的目录结构

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

index.js 文件包含如下所示的小路由 block :

子路由示例

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

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

登录导入

export default {
  component: LoginView
}

当用户访问 /login 时，他们会看到登录组件。容易吧？是的。现在您可能会注意到所有这些路由看起来都像一组与身份验证相关的 View 。我希望这些 View 共享一个布局。在本例中为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以供引用。

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

)