带参数的Reaction路由器导航后需要双击

2022-04-17 00:00:00 reactjs router javascript redux

简单的问题。

当我在例如/dashboard路由器中时,我单击<Link to="/users/:userID" >路由器并尝试返回到/dashboard它可以正常工作,但当我从/users/:userID路由器导航到另一个/users/:userID路由器并尝试返回时,我需要单击两次后退按钮,知道为什么吗?

例如

/dashboard->/USERS/1往返(需要单击1次)

/dashboard->/USERS/1->/USERS/2并返回到/USERS/1(点击2次 需要)

这是我在App.js中的路线

<Route path='/users/:userId'  render={()=><User/>} />

这是我的User.jsx Render()

render() {
    let movie = this.props.thisUserIdData;
    const { match } = this.props;
    console.log(match);
    return (
        <div> .... </div>
         )
}

和ComponentDidmount()

componentDidMount() {
   this.loadData(this.props.match.params.userId); 
   //using redux and  axios to  get data 
}

解决方案

我使用嵌套的onClick操作时遇到过类似的情况。

例如:

<div onClick={() => push(`/user/${id}`)}>
   <button onClick={() => push(`/user/${id}`)}>to user</button>
</div>

相关文章