React Router switch 不会为不同的路由安装相同的组件

Question

我定义了这些路线

<Switch>
    <Route path='/1' render={() => <ComponentA />} /> 
    <Route path='/2' render={() => <ComponentA />} />
    <Route path='/3' render={() => <ComponentA />} />
</Switch>

当我点击 /1 页面上的应用程序时，ComponentA 呈现良好。但是当我导航到 /2 时，ComponentA 不会重新安装，但渲染功能会触发。

如果我使用不同的组件，它将正确安装

ComponentA 根据 props 更改要呈现的内容，并且在 componentDidMount 中触发检索数据的操作

这是预期的行为吗，我们似乎不应该为不同的路由重用组件

Answer 1

只需在渲染组件上添加一个唯一键即可 - 为我修复了它。

<Switch>
   <Route path='/1' render={() => <ComponentA key={1} />} /> 
   <Route path='/2' render={() => <ComponentA key={2} />} />
   <Route path='/3' render={() => <ComponentA key={3} />} />
</Switch>