Question

我正在构建一个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组件，如下所示：<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为应用程序提供我正在寻求的层次结构？我希望路由器能够了解应用程序的深层嵌套结构（对于像面包屑和导航这样的东西），但我不想将组件物理嵌套在另一个中。这里有什么最佳做法？

Answer 1

考虑到您不希望在路径ProjectDetails同时显示Objects和/#/projects/1/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 this.props.children内填充ProjectDetails时才会嵌套路线。

Answer 2

您可以在“项目详细信息组件”中检查this.props.children。您可以编写如下的“项目详细信息”的渲染方法

render(){
   this.props.children?this.props.children:<Project Details/>
}

这将检查是否有子级，然后将渲染其子级，否则将渲染“项目详细信息”。

对嵌套导航的路由器最佳实践做出反应？

2 个答案: