返回

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

2022-11-13 React useEffect 1954 0

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


您可能感兴趣:

阿里云 云服务器 99元1年 2核2G 3M固定带宽 续费与新购同价

DOVE 网络加速器免费试用

顶部