无法呈现具有不同参数的相同路由反应路由器v4

Question

我正在实现一个带有路由信息/：id的反应页面。在此页面中，有各种由导航链接导航的URL。

例如：如果当前路由是localhost：3000/info/1，并且有链接localhost：3000/info/2和localhost：3000/info/3，则单击这些链接将加载我当前所在的页面，即：localhost：3000/info/1。在跟踪道具更改时，url 会短暂更改，但它再次加载同一页面。我该怎么做才能路由到具有不同参数的同一组件？

提前谢谢!!!!!

Answer 1

您应该在 componentDidUpdate 生命周期方法或 useEffect 挂钩中跟踪页面更新。

类组件：

componentDidUpdate(prevProps) {
if(prevProps.match.params.id !== this.props.match.params.id){
// do something
}
}

功能部件：

useEffect(() => {
// do something
}, [props.match.params.id]);

Answer 2

以下是通过 React 钩子和功能组件实现相同目标的方法：

useEffect(() => {
//do something
}, [props.match.params.id]);