Question

我正在将一个应用程序从react-router版本3迁移到5，并且有点想找出解决以下问题的最佳方法。

我有一些利用包装组件的路线。

在routerv3中，我可以做类似的事情

const Container = props => 
  <div>
    <header>container1</header>
    { props.children } 
  </div>

const Container2 = props => 
  <div>
    <header>container2</header>
    { props.children } 
  </div>

这些容器具有其他功能

<Route component={Container}>
  <Route path='/container1' component={Page1} />
</Route>

<Route component={Container2}>
  <Route path='/container2' component={Page1} />
</Route>

导航到/container1时，将用包裹Page1的{{1}}组件，然后在Container1处将{{1} 1}}包装它。

但是，当移至路由器v4 +时，会呈现所有匹配的路由，因此发生的结果是，例如在/container2上，结果是

Page1

有人知道一种写这些“包装组件”的方法，以便只在路由匹配时才呈现它们吗？或者，如果那不是React-router 4/5的工作方式，那么也许是做这种事情的更好的方法。

这是我试图解决这个问题的链接

https://stackblitz.com/edit/react-jvsdsn?file=index.js

Answer 1

您可以这样做

<Route
  path="/container1"
  render={(routeProps) => (
    <Container>
      <Page1 {...routeProps} />
    </Container>
  )}
/>
<Route
  path="/container2"
  render={(routeProps) => (
    <Container2>
      <Page1 {...routeProps} />
    </Container2>
  )}
/>

如何在React Router 4/5中有条件地渲染包装组件

1 个答案: