从同一组件链接到组件不起作用

Question

我有一个组件，例如MyComponent，可以通过这样的路径进行访问：

 <Route path="/myComponent/:id" exact component={MyComponent} />

内部 MyComponent，我有：

 <Link to="/myComponent/2">2</Link>

也就是说，MyComponent链接到自身。但是此链接不起作用！如果我通过Chrome的开发人员工具检查React组件，则props.match已进行了相应的更新，但是MyComponent尚未得到重新渲染，构造函数也未被调用，因此可以相应地更新状态。

最小示例：https://codesandbox.io/s/sharp-bouman-i1b0p?fontsize=14-如果浏览到this URL，则将看到ID 1出现在渲染的屏幕上，但是，如果单击2链接，即使该屏幕也不会重新渲染该网址会更新。如果您转到this URL，则ID 2将按预期显示。

Answer 1

如果已经安装了组件，React路由器将重用该组件实例。因此，不会调用构造函数或componentDidMount挂钩。

您可以通过添加componentDidUpdate来解决此问题：

componentDidUpdate(prevProps) {
  const { id } = this.props.match.params;
  if(id !== this.state.id) {
    this.setState({
      id
    });
  }
}

Codesandbox

Answer 2

AAAH！它确实可以毫无问题地重新渲染。永远不会更新的只是您的state.id。您应该按原样使用道具或保持状态为最新：

g.fillRoundRect(0, 0, getWidth(), getHeight(), 50, 50);