reactjs - React Router 开关不会为不同的路由安装相同的组件

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>