Question

我定义了这些路线

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

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

如果我使用其他组件，它将正确安装

ComponentA根据道具更改要渲染的内容，并在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>

React Router交换机不为不同的路由安装相同的组件

1 个答案: