使用 React Router v4 重复路由

Question

在嵌套组件中重复路由是一种好方法吗？

<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>

我不确定这是最好的解决方案。如您所见，我将包装我的应用程序的所有组件，其中一些组件除外。我想为除 /signin 和 /signup 之外的所有路径呈现 Layout 和 Header。

也许有更好的解决方案？

Answer 1

关于您的代码，我担心的事情很少：1. Render 是一个函数：

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

2。 ComponentUnderLayout2 永远不会被渲染：

<Route exact path="/" render={props =>
   {/* you have declared that this will get render ONLY when URL is exactly ` "/" which means "/path1" will never get to this place */}
   <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>

编辑：

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

使用 React Router v4 重复路由

Repeated routes with React Router v4

reactjs

react-router-v4