Reactjs 使用React路由器v4重复路由

在嵌套组件中重复布线的好方法是什么

<App>
   <Route exact path="/" render={props =>
      <Layout>
         <Route exact path="/" component={ComponentUnderLayout} />
         <Route exact path="/path1" component={ComponentUnderLayout2} /> 
      </Layout>
   } />
   <Route path="/signin" component={ComponentWithoutLayout} />
</App>

} />

我不确定这是不是最好的解决办法。正如你所看到的，我将包装我的应用程序的所有组件，除了其中的一些。我想呈现除/sign和/signup之外的所有路径的布局和标题

---

也许有更好的解决方案吗？

关于您的代码，我只关心几件事：1。渲染是一个函数：

<Route exact path="/" render={props =>
   <Layout>
      <Route exact path="/" component={ComponentUnderLayout} />
      <Route exact path="/path1" component={ComponentUnderLayout2} /> 
   </Layout>
} />

所以如果你在上面改正，你最终会得到：

<App>
   <Route exact path="/" render={(props) => 
      <Layout>
         <ComponentUnderLayout {...props} />
      </Layout>
   } />
   <Route path="/path1" render={props => 
      <Layout>
         <ComponentUnderLayout2 {...props} />
      </Layout>
   } /> 
   <Route path="/signin" component={ComponentWithoutLayout} />
</App>

} />
} /> 

编辑：

谢谢您的回答！我明白你的意思，但在这种情况下，我必须复制很多代码。我正在尝试为除/signin和/signup之外的所有路径呈现

标题

和

布局

。您不能在编辑中执行类似操作吗？我认为在这种情况下，布局是在

组件上方呈现的，带有Outlayout

。

<App>
   <Route exact path="/" render={(props) => 
      <Layout>
         <ComponentUnderLayout {...props} />
      </Layout>
   } />
   <Route path="/path1" render={props => 
      <Layout>
         <ComponentUnderLayout2 {...props} />
      </Layout>
   } /> 
   <Route path="/signin" component={ComponentWithoutLayout} />
</App>

<App>
   <Layout>
     <Route exact path="/" component={ComponentUnderLayout} />
     <Route exact path="/path1" component={ComponentUnderLayout2} />
   </Layout>
   <Route exact path="/signin" component={ComponentWithoutLayout} />
</App>