首页 文章

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

提问于
浏览 次
8

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

reactjs react-router

2 回答

  • 3

    考虑到您不希望在路径/#/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'
      },

    只有当你打算在ProjectDetails的this.props.children内填充Objects时，才会嵌套路由。

    回复于
  • 1

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

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

    这将检查孩子是否可用，然后它将渲染他们的孩子，否则它将呈现项目详细信息。

    回复于

相关问题