Javascript 我为什么要筑巢？

我很难理解为什么我想通过组件嵌套我的反应路线。在下面的示例中，有两个组件分布在多个文件中

文件1：

 <Route path='/topics' component={Topics} />

App.js：

  <Provider {...RootStore}>
    <Router history={RootStore.routerStore.history}>
      <Switch>
        {routes.map((route) => {
            return (
              <Route
                key={route.path}
                path={route.path}
                component={route.component}
                exact={true}
                meta={route.meta}
              />
            );
          }
        })}
      </Switch>
    </Router>
  </Provider>

{routes.map（（route）=>{
返回(
);
}
})}

当您有几十条路由时，我发现阅读、实现和理解我的路由器将更加清晰

这与我在其他框架（如VueJS的VUEStoreFront）中看到的路由实现方式更为相似

我在这里做的事情有什么问题吗？如果没有，为什么人们要筑巢

谢谢：）

编辑：

为了进一步扩展，我使用以下路线进行任何需要授权的活动：

            return (
              <AppRoute
                key={route.path}
                path={route.path}
                component={route.component}
                exact={true}
                meta={route.meta}
              />
            );

返回(
);

此命名路由的声明如下所示：

const AppRoute = ({ ...props }) =>
  RootStore.userStore.hasSession ? (
    <Theme>
      <Route {...props} />
    </Theme>
  ) : (
    <Redirect to={"/login"} />
  );

const AppRoute=（{…props}）=>
RootStore.userStore.hasSession？(
) : (
);

---

在主题中，我们有在每个页面之间使用的共享组件，例如导航栏和标题。这会阻止重新呈现，因此本质上每个路由都是一个容器，而不是整个页面。

一个简短但重要的原因是重新呈现

如果在

/foo

下有一个路由渲染，在

/foo/：id

下有一个路由渲染，那么React将不需要重新渲染

foo

路由Compliant，即使您从一个id切换到另一个id。如果不嵌套它们，则必须重新渲染所有内容

---

当您想要添加一些简单规则时，这会带来更多好处，例如，仅允许用户在经过身份验证后输入

/foo

。您可以将此规则添加到

/foo

路由组件中。如果用户经过身份验证，则会呈现内容，并且所有子路由都变为可用。如果没有嵌套，您需要在每个路由中再次实现它。

因为一个路由有子路由。例如，Product CRUD创建和更新了共享一个父路由的路由。我相信我已经通过将这些路由通过不同的布局实现了这一前提，一个需要授权，另一个不需要授权。然后，每个布局/主题通过props.children处理路线的组件。通过这种方式，共享组件（如导航、标题等）不会在每条路线上重新呈现。我进一步扩展了我的问题，以显示示例：）

            return (
              <AppRoute
                key={route.path}
                path={route.path}
                component={route.component}
                exact={true}
                meta={route.meta}
              />
            );

const AppRoute = ({ ...props }) =>
  RootStore.userStore.hasSession ? (
    <Theme>
      <Route {...props} />
    </Theme>
  ) : (
    <Redirect to={"/login"} />
  );