Как условно отобразить компоненты упаковки в React Router 4/5 - PullRequest
Новая
       27

Как условно отобразить компоненты упаковки в React Router 4/5

0 голосов
/ 03 мая 2019

Я переношу приложение с реакции-маршрутизатора версии 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 с обтеканием Container1, а затем на /container2 будет рендерить Page1 с обтеканием Container2.

Однако при переходе к маршрутизатору v4 + отображаются все совпадающие маршруты, поэтому получается, например, на /container2 результат 

<div>
  <header>container1</header>
</div>
<div>
  <header>container2</header> 
  <Page1 />
</div>

Кто-нибудь знает способ написания этих«оборачивать компоненты» так, что они отображаются только при совпадении маршрутов?Или, возможно, лучший способ сделать это, если не так работает реагирующий маршрутизатор 4/5.

вот ссылка на мой стек, пытающийся понять это

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

1 Ответ

0 голосов
/ 03 мая 2019

Вы можете сделать что-то вроде этого 

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