Question

我正在为与children道具匹配的所有路线寻找类似path的机制。

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

用例：我们的应用程序将在视口的两半中呈现内容。

如果一个children中没有children，则另一个SplitView将展开以占据视口的整个高度 - 否则它将是50/50分割。
- 这个问题的解决方案可能只是SplitView ...
如果底部children的{{1}}为0，则children.length将无法呈现。
如果SplitView的{{1}}要比我们为该分组生成标签或制作“可刷卡”内容，那么

虽然<Header />的任何匹配都将始终是SplitView的一个子组件，而children.length > 1的{{1}}将始终只是路径的数量在Route中定义。 ¯\ _（ツ）_ /¯

我不怀疑可能有更好的方法来实现我的目标，并欢迎这方面的替代方案。

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

Route

/富

children

/酒吧

SplitView

/巴兹

SplitView

/ DOB

  <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 | + - +一样进行操作。

Answer 1

文档中有一种很好的方法：https://reacttraining.com/react-router/web/api/Route/children-func

只要使用子节点，如果此网址没有匹配，它将返回match === null：

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

Answer 2

您可以使用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 3

你可能只是使用渲染函数来渲染下面这四条路线中的每一条，而不是将它分成七条（只做第一条路线的例子）：

doInBackground()

React Router v4 - 获取与路径匹配的路由的方法？

3 个答案: