在Router或Page组件中嵌入页面组件？

Question

我们有一个react项目，其中包含布局组件，子布局组件和一些页面组件。

<Layout1 />
<Layout2 />
 <ChildLayout1>
 <ChildLayout2>
   <Component1/> 
   <Component2> 
   <Component3>

我们可以说6个不同的页面，都是由这些组件组成的。我的问题是关于项目的嵌套，路由器（通过嵌套路由组件）或单独的页面组件。如果你没有得到我的问题，这里是两个场景分开。

场景1：在react-router中嵌套

<Router>
    <Route component={Layout1}>
        <Route component={ChildLayout1}>
            <Route path="page1" component={Component1} />
            <Route path="page2" component={Component2} />
        </Route>
        <Route component={ChildLayout2}>
           <Route path="page3" component={Component2} />
           <Route path="page4" component={Component3} />
        </Route> 
    </Route>
    <Route component={Layout1}>
        <Route component={ChildLayout1}>
            <Route path="page5" component={Component1} />
            <Route path="page6" component={Component2} />
        </Route> 
    </Route>
</Router>

场景2：在页面组件中嵌套并在路径组件中安装

// for all pages do the same as below 
// page1.jsx

<Layout1>
    <ChildLayout1>
        <Component1 />
        <Component2 />
    <ChildLayout1 />
<Layout1 />

// routes.jsx

<Router>
    <Route path="page1" component={Page1} />
    <Route path="page2" component={Page2} />
    <Route path="page3" component={Page3} />
    <Route path="page4" component={Page4} />
    <Route path="page5" component={Page5} />
    <Route path="page6" component={Page6} />
</Router>

单一方式比另一种方式有什么好处？从性能的角度来看，是否有任何差异，或者只是编码器的易用性可能更喜欢一个而不是另一个。