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

尝试像这样访问它：

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

组件和渲染道具之间有区别。您可以在这里找到答案： react router difference between component and render

Answer 2

render —返回React元素的函数。路径匹配时将调用它。这与component相似，但是对于内联渲染和将额外的props传递到元素非常有用。

PageContainer是一个组件，因此应调用但不像PageContainer

更改

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

收件人

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

根据您的情况，我建议您使用组件prop而不是render

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

有和没有功能的组件之间的React Router差异

2 个答案: