React路由器嵌套导航的最佳做法？

我正在构建一个React应用程序，并使用React Router来管理路由。 应用程序的信息体系结构可以表示如下：

 - App
     - Projects
         - Project 1
             - Objects
               - Object 1
               - Object 2
               - etc...
             - Collaborators
         - ...
     - Services
     - Users

在查看诸如/#/projects/1/components/1的路径时，应用程序的UI看起来像这样

-----------------------------------------------------------
|            | Home > Projects > 0 > Object > 1           |
|  Home      |--------------------------------------------|
|            |                                            |
|  Projects  |   Object 1                                 |
|            |                                            |
|  Services  |   Blah blah blah                           |
|            |                                            |
|  Users     |                                            |
|            |                                            |
-----------------------------------------------------------

请注意，对于上述信息体系结构方案中显示的任何给定路由，视图应该在主体部分中呈现（其中'组件1'在上图中呈现）。

现在我将描述我是如何在使用React Router的React中错误地实现它的：

我一直在使用PlainRoutes来定义我的路线。 以下是如何定义路线的简短示例：

const routes = [
    {
        path: '/',
        component: App,
        name: 'Home',
        childRoutes: [
          // /projects
          {
              path: 'projects',
              component: Projects,
              name: 'Projects'
          },
          {
              path: 'projects/:projectid',
              component: ProjectDetails,
              name: 'Project Details',
              childRoutes: [
                  {
                       path: 'objects',
                       component: Objects,
                       name: 'Objects'
                  },
                  {
                      path: 'objects/:objectid',
                      component: ObjectDetails,
                      name: 'Object Details'
                  },
                  {
                      path: 'collaborators',
                      component: Collaborators,
                      name: 'Collaborators'
                  }
              ]
          },
          // /services
          {
              path: 'services',
              component: Services,
              name: 'Services'
          },
          // /users
          {
              path: 'users',
              component: Users,
              name: 'Users'
          }
      ]
   }
];

然后将其馈入React路由器组件，如下所示： <Router routes={routes}></Router>

做这种工作。 当我尝试导航到：

/#/projects

我会看到应用程序正文中呈现的Projects组件。

当我尝试导航到：

/#/projects/1

我会看到应用程序正文中呈现的ProjectDetail组件。

但是，当我尝试导航到：

/#/projects/1/objects

我仍然会看到应用程序正文中呈现的ProjectDetail组件。 我不确定为什么当/projects/:projectid参数解析时路由器会停下来，而不是继续渲染分配给/projects/:projectid/objects路由的组件。

我认为问题在于我以错误的方式使用了React Router。 儿童路线应该是物理嵌套在他们的父组件中 - 不仅仅是逻辑嵌套。 至少，我认为这是问题所在。 显然，我对如何使用React Router有点困惑 - 特别是childRoutes的概念。

现在的问题是 - 如何使用React Router为应用程序提供我正在寻找的分层结构，如上所述？ 我希望路由器知道应用程序的深层嵌套结构（用于面包屑和导航等），但我不想将这些组件嵌套在一起。 这里有什么最佳实践？

---

考虑到你不想在路径/#/projects/1/objects同时显示ProjectDetails和Objects ，那么你不想嵌套这些路线。

childRoutes: [
      // /projects
      {
          path: 'projects',
          component: Projects,
          name: 'Projects'
      },
      {
          path: 'projects/:projectid',
          component: ProjectDetails,
          name: 'Project Details',
      },
      {
          path: 'projects/:projectid/objects',
          component: Objects,
          name: 'Objects'
      },
      {
          path: 'projects/:projectid/objects/:objectid',
          component: ObjectDetails,
          name: 'Object Details'
      },

只有当您打算将Objects填充到ProjectDetails this.props.children内时才会嵌套路由。

链接地址: http://www.djcxy.com/p/52129.html

上一篇: React router best practices for nested navigation?

下一篇: Router with a layout page or multiple components per page