React-Router中的Link，路由地址不变的时候如何重载组件？

Question

如当前路由地址为：http://localhost:8585/#/book
页面中有个<Link to="/book?id=1">《前端从入门到放弃》</Link>

如何在点击Link的时候让页面重载？

Answer 1

如果你用的react15.x的版本 可以参考react-router url参数更新
用componentWillReceiveProps去控制

如果用的react16.x的版本 我觉得可以用useRef+useEffect去控制
useRef记录你旧的参数 useEffect去比对新的参数和旧的参数是不是有区别 再去页面重载

还是页面分开比较好 换个url去做新的事情

Answer 2

一般采用 key 解决此类问题

<Link to="/book?id=1" :key="key">《前端从入门到放弃》</Link>

methods{
    click(){
        this.key = new Date().getTime();
    }
}

Answer 3

重载的部分使用id作为Props，id改变自然组件会接收到新的prop从而响应改变
如果是functional component那更简单了，直接将id作为用useEffect的依赖参数