React没有检测到url中最后一个参数的变化。如果我重新加载页面，它就会工作。
我正在使用**“React路由器域”：“^5.0.1”**
“路由器”
<Router>
<PrivateRoute path="/users/:id" exact strict component={User}/>
</Router>然后，在User组件中，我有一个用户列表和所选用户的详细信息
class User extends Component {
constructor(props) {
super(props);
this.state = {
userId: null,
users: [{id: '1', name: 'john'}, {id: '2', name: 'mary'}]
}
}
componentDidMount() {
const { id } = this.props.match.params;
this.setState({'userId': id})
}
render() {
return (
<div>
<div className="users">
{this.state.users.map((user, index) => {
return (<Link to={`users/${user.id}`} key={index}>{user.name}</Link>)
})}
</div>
<pre className="details">{this.state.userId}</pre>
</div>
)
}
}
export default User;当我选择不同的用户时，url会更改，但this.state.userid保持不变
最新消息：
我解决了它与
componentWillReceiveProps(nextProps) {
const { id } = nextProps.match.params;
this.setState({'userId': id}
}但我收到了这个警告。
Warning: componentWillReceiveProps has been renamed, and is not recommended for use.反抗虎克斯还是死？
4条答案
按热度按时间3duebb1j1#
ComponentDidMount只调用一次（当组件装入时），因此无论您是否更改路由，都不会再次调用生命周期。为了达到你想要的效果，我建议你使用另一个生命周期，比如
ComponentDidUpdate或getDerivedStateFromProps，或者开始使用钩子，比如useEffect。或者如果简单的话，直接在render方法中使用prop。最新消息：
这样就可以了：
componentDidUpdate componentDidUpdate仍然可以安全使用，并在更新发生后立即调用。
x4shl7ld2#
ComponentDidMount只在组件挂载时调用一次。当您更改URL时，您的组件可能会由于react-router而重新呈现，但该组件已挂载，将不会再次运行该代码。
我认为在这种情况下，您可以直接this.props.match.params.id在render方法中引用www.example.com，而不是将其设置为state。或者，您可以使用componentDidUpdate沿着检查哪些属性发生了更改，以重置状态。
oknwwptz3#
若要侦测URL或动态URL或URL查询参数或中的变更，请侦测查询参数上的变更上的上一页按钮**，请使用componentDidUpdate
j5fpnvbx4#
在案例中，您面临的问题是由于您的网站中的重定向。
尝试使用< a >而不是 < Link >