React中useNavigate跳转路由后页面未刷新数据不更新问题

问题原因 #

• React Router 中，当路由路径（path）未变化，仅查询参数（query params）改变时，组件不会重新挂载，只会更新location对象
• 你的useEffect依赖数组为空，仅在组件首次挂载时执行一次，后续查询参数变化不会触发它重新执行
• 初始化时创建的query变量是闭包捕获的旧值，不会随URL更新而自动同步

修复方案1：给useEffect添加正确依赖项 #

将location.search加入useEffect的依赖数组，同时把URLSearchParams的创建移到useEffect内部，确保每次都能获取最新的查询参数：

let location = useLocation();
const navigate = useNavigate();

useEffect(() => {
  const getUser = async () => {
    const query = new URLSearchParams(location.search);
    const res = await axios.get('http://localhost:8082/api/getUserInfo', {
      params: {
        id: query.get("id"),
      },
      withCredentials: true,
    })
    setVisitor(res.data.visitor);
    setUser(res.data.user);
  }
  getUser();
}, [location.search])

修复方案2：使用React Router的useSearchParams钩子（推荐） #

React Router v6+提供了专门处理查询参数的useSearchParams钩子，它会自动监听参数变化，无需手动处理location：

import { useSearchParams, useNavigate } from 'react-router-dom';

const Profile = () => {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();

  useEffect(() => {
    const getUser = async () => {
      const userId = searchParams.get("id");
      const res = await axios.get('http://localhost:8082/api/getUserInfo', {
        params: { id: userId },
        withCredentials: true,
      })
      setVisitor(res.data.visitor);
      setUser(res.data.user);
    }
    getUser();
  }, [searchParams])

  // 组件其他逻辑
}

内容的提问来源于stack exchange，提问作者Zombani