标签: react-router-v5

我在Web和SO上搜索了很多内容，在reactiflux聊天中询问，但是没有找到一种干净的，没有漏洞的方法来根据路径/路径呈现某些组件。

假设我有<Header />应该显示在某些页面上的内容，应该在其他页面上隐藏的内容。

确保可以在Header组件中使用此字符串

if (props.location.pathname.indexOf('/pageWithoutAHeader') > -1) return null

如果/pageWithoutAHeader是唯一的，那完全没问题。如果我需要5页具有相同的功能，它将变为：

if (props.location.pathname.indexOf('/pageWithoutAHeader1') > -1) return null
if (props.location.pathname.indexOf('/pageWithoutAHeader2') > -1) return null
if (props.location.pathname.indexOf('/pageWithoutAHeader3') > -1) return null

是的，我可以将路由存储在数组中并编写一个循环，这将更可重用代码。但这是处理此用例的最好，最优雅的方法吗？

我认为这甚至可能是错误的，例如，如果我不使用路由呈现页面的标题，/xyz而我却使用带有UUID的路由，例如/projects/:id和id=xyzfoo，/projects/xyzfoo则不会显示标题，但应该显示标题。

路由到这样的组件有什么区别：

 <Route path="coolPath" component={MyComponent} />
or
 <Route path="coolPath" render={props => <MyComponent {...props} customProp="s" } />

对此：

 <Route path"=coolPath">
      <MyComponent />
 </Route>
or
 <Route path"=coolPath">
      <MyComponent cusomProps="cp"/>
 </Route>