带有参数导航返回的 React Router 需要双击

Posted 2023-02-19

【中文标题】带有参数导航返回的 React Router 需要双击

【英文标题】：React Router with params navigatin back needs double click

【发布时间】：2018-06-09 01:11:27

【问题描述】：

简单的问题。

例如，当我在/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() 
    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 

【问题讨论】：

我会登录 componentDidMount 并查看它是否为 users/2 路由加载了两次。我还没有遇到过这个问题，但猜测是可以通过更改使用组件的路线来修复它：

【参考方案1】：

我在嵌套onClick 操作时遇到过类似情况。

例如：

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