Question

我尝试使用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文件包含的小路径块如下所示：

示例childroute

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帖子，虽然它有点难以确定，因为他们不会使用plainroutes。我链接一个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 : [
        ]
      }
    ]
  }

)

使用plainroutes对多个布局（路由根）做出反应

1 个答案: