Javascript 获取url更改时的新数据

我正在开发react应用程序。所以我的主页上有这些组件

边栏

边栏建议

标签

标签建议

我的主要路线如下：

<Router>
    <Route path={["/", "/home", "/tags/:tagId"]} component ={Home}/>
</Router>

我的主页组件是：

  <Router>
    <Sidebar {some Props} />

    <Switch>
      <Route
         exact
         path={["/", "/home"]}
         render={(props) => (
           <Suggestions {some props} />
         )}
      />
      <Route exact path="/tags/:tagId" component={TagsSuggestion} />
    </Switch>

    <Tags { some props}  />
  </Router>

(
)}
/>

所以，每当我点击侧边栏中的任何数据时，我都希望侧边栏的建议能够呈现出来

每当我单击tags组件中的任何标记时，它都会重定向到带有标记Id的“/tags/：tagId”

问题: 在开始时，会显示边栏建议，当我单击标记时，会加载标记建议组件，URL也会更改。但是，如果我单击另一个标记，该组件将不会呈现，建议也不会更改，我必须手动重新加载页面以查看标记建议组件

我的标签建议文件类似于这个较小的版本

import React from "react";

class TagsSuggestion extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tag: null
    };
  }

  componentDidMount() {
    this.setState({ tag: this.props.match.params.id });
    
    // Here I fetch the data
  }

  render() {
    return <h3> This is Tag {this.state.tag} Suggestion</h3>;
  }
}

export default TagsSuggestion;

从“React”导入React；
类标记建议扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
标签：空
};
}
componentDidMount（）{
this.setState（{tag:this.props.match.params.id}）；
//我在这里获取数据
}
render（）{
返回这是标记{This.state.Tag}建议；
}
}
导出默认标记建议；

我知道问题出在哪里。componentDidMount只执行一次，但是否有其他方法可以在单击标记时工作并获取新数据

---

沙盒：

您可以使用componentDidUpdate