React Router v4 - 获取与路径匹配的路由集合的方式？

Question

我正在寻找类似 prop的所有路线的类似children的机制。

最初我正在考虑检查SplitView的children。虽然我现在意识到Routes本身将是children而不是他们呈现的组件。

使用案例： 我们的应用程序将在视口的两半中的一个中渲染内容。

• 如果一个SplitView没有children，其他SplitView将扩展为占用视口的全高度 - 否则它是一个50/50。
  • 到这个问题的解决可能只是一个Flexbox将超过上children计数...
• 如果底部SplitView的children.length分别为0，比<Header />不会得到呈现。
• 如果要么SplitView的children.length > 1，比我们将生成标签，或使“swipeable”，该分裂的内容。

在SplitView虽然一个Route的任何匹配将永远是这Route和SplitView的children的子组件将始终是路由的仅有数预先定义的。我不怀疑可能有更好的方法来实现我在这里所做的目标，也欢迎这方面的替代方案。

代码示例： https://codesandbox.io/s/x9mpl34jvw

<SplitView> 
    <Route path={["/foo", "/bar"]} component={ContainerA} /> 
    <Route path="/baz" component={ContainerB} /> 
    <Route path="/bob" component={ContainerG} /> 
    </SplitView> 

    { onlyIfMatchesInBottomSplit && <Header /> } 

    <SplitView> 
    <Route path="/foo" component={ContainerC} /> 
    <Route path="/bar" component={ContainerD} /> 
    <Route path="/baz" component={ContainerE} /> 
    <Route path="/dob" component={ContainerF} /> 
    </SplitView> 

/富

+ - + 
| A | 
+ - + 
| C | 
+ - + 

/条

+ - + 
| A | 
+ - + 
| D | 
+ - + 

/巴兹

+ - + 
| B | 
+ - + 
| E | 
+ - + 

/DOB

+ - + 
| | 
+ F + 
| | 
+ - + 

需要明确的是，这个问题是不是得到的组件渲染在正确的组合，它做工精细的一部分。它可以在数组中捕获为每个SplitView渲染的组件，以便可以像使用children一样操作它们。

Answer 1

您可以使用render方法和props.match字段在Route内检查它。 您的路线将需要成为

<Route path="/baz" render={(props) => { 
      console.log(props.match.url===props.match.path); //will return true when there is a match. 
      return <ContainerB />; 
     }} /> 

Answer 2

你可能只是使用渲染功能来呈现，而不是分裂它分为七（仅做第一个示例）四个路线像下面的，：

<Route path="/foo" render={(props) => 
     <div> 
      <SplitView> 
      <ContainerA {...props} /> 
      </SplitView> 
      <Header /> 
      <SplitView> 
      <ContainerC {...props} /> 
      </SplitView> 
     </div> 
    }} 
/> 

Answer 3

有一个在documenation一个好办法：https://reacttraining.com/react-router/web/api/Route/children-func

只需要用孩子，它会返回匹配===空，如果没有匹配这个网址：

<Route path={to} children={({ match }) => (
    <li className={match ? 'active' : ''}> 
    <Link to={to} {...rest}/> 
    </li> 
)}/>