React Router 组件带功能和不带功能的区别

React Router difference between component with and without function

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)

尝试像这样访问它:

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

组件和渲染道具之间存在差异。您可以在这里找到答案: react router difference between component and render

render — returns 一个 React 元素的函数。路径匹配时将调用它。这类似于组件,但对于内联渲染和将额外的道具传递给元素很有用。

PageContainer 是一个应该调用但不像 PageContainer 的组件

改变

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

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

在你的情况下,我建议你使用 component prop 而不是 render

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