使用useNavigate跳转后组件未重渲染，如何强制刷新获取更新数据？

问题根源 #

你的首页组件应该仅在首次挂载时执行了一次数据获取逻辑，而通过navigate("/")跳转回首页时，组件并未被卸载后重新挂载，因此不会触发数据重新请求，导致展示旧内容。另外要注意：必须确保数据库更新操作是异步完成后再执行跳转，否则可能出现数据库还没更新完就跳转的情况，首页依然获取旧数据。

具体解决方案 #

方案一：监听路由变化触发数据刷新

在首页组件中使用useLocation监听路由变化，每次路径切换回首页时重新请求数据：

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function Home() {
  const location = useLocation();

  useEffect(() => {
    // 执行获取数据库数据的逻辑
    fetchData();
  }, [location]); // 依赖location，路由变化时重新执行

  return <div>首页内容展示</div>;
}

方案二：跳转时传递状态标识

在UpdateData组件中，更新数据库成功后跳转时携带刷新标识，首页检测到该标识后重新请求数据：

// UpdateData组件
async function update() {
  // 等待数据库更新完成
  await updateDatabase();
  // 跳转时携带刷新状态
  navigate("/", { state: { shouldRefresh: true } });
}

// 首页组件
import { useEffect, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';

function Home() {
  const location = useLocation();
  const navigate = useNavigate();
  const [refreshTrigger, setRefreshTrigger] = useState(0);

  useEffect(() => {
    if (location.state?.shouldRefresh) {
      // 触发刷新
      setRefreshTrigger(prev => prev + 1);
      // 清除状态，避免页面刷新后重复触发
      navigate(location.pathname, { replace: true });
    }
  }, [location]);

  useEffect(() => {
    fetchData();
  }, [refreshTrigger]);

  return <div>首页内容展示</div>;
}

方案三：全局状态管理同步数据

将首页数据存入全局状态（如Context或Redux），更新数据库后直接更新全局状态，首页依赖全局状态自动重新渲染：

// 示例使用Context
// DataContext.js
import { createContext, useContext, useState } from 'react';

const DataContext = createContext();

export function DataProvider({ children }) {
  const [data, setData] = useState([]);

  const updateAndFetchData = async (newData) => {
    // 更新数据库
    await updateDatabase(newData);
    // 获取最新数据并更新全局状态
    const latestData = await fetchData();
    setData(latestData);
  };

  return (
    <DataContext.Provider value={{ data, updateAndFetchData }}>
      {children}
    </DataContext.Provider>
  );
}

export function useData() {
  return useContext(DataContext);
}

// UpdateData组件
function UpdateData() {
  const { updateAndFetchData } = useData();
  const navigate = useNavigate();

  async function update() {
    await updateAndFetchData(newData);
    navigate("/");
  }

  // 避免组件重复渲染时重复执行更新，用useEffect包裹
  useEffect(() => {
    update();
  }, []);

  return ...;
}

// 首页组件
function Home() {
  const { data } = useData();
  // 直接使用全局状态的数据，状态更新时自动重新渲染
  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.content}</div>
      ))}
    </div>
  );
}

额外注意 #

你的UpdateData组件中直接在函数体调用update()，会导致组件每次渲染都执行更新逻辑，建议将其放入useEffect中并设置空依赖，确保仅执行一次：

useEffect(() => {
  update();
}, []);

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