Реагировать на разницу между компонентами с функцией и без нее

Question

const PATH = BASE + '/' + id;
<Route path="PATH" render={PageContainer} /> (DOESN'T WORK for the case below)
<Route path="PATH" component={PageContainer} /> (DOESN'T WORK for the case below)
<Route path="PATH" component={ () => <PageContainer /> } /> (WORKS)

Steps:
1) go to the page BASE/1
2) go back to BASE
3) go to BASE/2

PageContainer connects to the store and passes props to Page.

Почему второй подход работает, а первый нет?

Update:     <Route path="PATH" render={PageContainer} /> (DOESN'T WORK for the case below)

Answer 1

render - функция, которая возвращает элемент React.Он будет вызван при совпадении пути.Это похоже на компонент, но полезно для встроенного рендеринга и передачи дополнительных реквизитов элементу.

PageContainer - это компонент, который должен вызываться, но не такой, как PageContainer

Change

  <Route path="PATH" render={PageContainer} /> 

To

  <Route path="PATH" render={<PageContainer />} /> 

В вашем случае я рекомендую вам использовать компонент prop вместо render

  <Route path="PATH" component={<PageContainer />} /> 

Answer 2

Попробуйте получить к нему доступ следующим образом:

<Route path="PATH" component={PageContainer} /> 

Существует различие между компонентами и опорами рендеринга.Вы можете найти ответ здесь: реагирует на разницу между маршрутизатором и компонентом рендеринга