React路径不变location.search参数改变不触发useEffect

React项目里有两个菜单项会到同一个pathname但是参数不同，这两个页面切换时不会触发页面数据刷新（切换url页面代码不会重新执行）。原来的做法是用window.location.search获取参数，在别的地方都没有问题，这里比较特殊，因为是相同路径的页面跳转。

const currDirection = new URLSearchParams(window.location.search).get("direction");
console.log(currDirection);
useEffect(()=>{
    // to do
},[window.location.search或者direction]);

即使把window.location.search放在useEffect数组里，在从path?direction=1切换到path?direction=2时页面不会刷新。切换时根本执行到获取参数打印log。

解决办法是

import { useLocation } from "react-router-dom";
const location = useLocation();
const currDirection = new URLSearchParams(location.search).get("direction");
console.log(currDirection);
useEffect(()=>{
    // to do
},[direction])

这样url参数变化时会触发useEffect，也就是参数变化时会执行获取参数的代码，并且触发useEffect。

虽然两个location对象用法类似，但是测试下来，只要调用过useLocation()，那么url变化时页面代码会重新执行，否则不会执行没有任何log。所以像下面这样也没有问题，只跟是否调用useLocation()有关。

const location = useLocation(); // 只声明，并未使用
const currDirection = new URLSearchParams(window.location.search).get(
    "direction"
);
console.log(currDirection);
useEffect(()=>{
    // to do
},[window.location.search,currDirection或者direction]); // 页面代码重新执行并且触发useEffect

声明 本站内容部分来源于网络，仅供参考学习交流并不代表本站观念，如无意中侵犯您的权益（ 包括/图片/视频/个人隐私等信息 ）请来信告知，本站收到信息会尽快处理并回访，联系邮箱：laodilailiao@foxmail.com

微信扫一扫：分享

微信里点“发现”，扫一下