React Native中用Hooks实现主页面A从特定页面返回的按需刷新

核心思路 #

通过路由跳转时携带状态标记，在页面A中判断当前是否从页面D返回，以此决定是否执行刷新操作。结合useEffect监听路由变化或页面挂载，触发对应逻辑。

具体实现步骤 #

1. 跳转页面D时携带标记 #

在页面A跳转至D页面时，通过navigate方法（react-router-dom v6+）的第二个参数添加state，标记该跳转行为：

// 页面A中的跳转逻辑
import { useNavigate } from 'react-router-dom';

const PageA = () => {
  const navigate = useNavigate();

  const goToPageD = () => {
    // 携带state标记：从A跳去D
    navigate('/page-d', { state: { fromAtoD: true } });
  };

  // ...其他页面内容
};

2. 在页面A中判断是否需要刷新 #

使用useLocation获取当前路由的state，结合useEffect监听路由变化，判断是否执行刷新：

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

const PageA = () => {
  const location = useLocation();
  const navigate = useNavigate();

  // 自定义刷新逻辑
  const refreshPageA = () => {
    // 此处编写刷新逻辑，比如重新请求数据、更新组件状态等
    console.log('执行页面A刷新');
  };

  useEffect(() => {
    const isFromD = location.state?.fromAtoD;
    
    // 非从D返回时执行刷新
    if (!isFromD) {
      refreshPageA();
    }
    
    // 重置state标记，避免后续路由操作受影响
    if (isFromD) {
      navigate(location.pathname, { replace: true, state: {} });
    }
  }, [location, navigate]);

  // 跳转到B、C页面无需额外标记
  const goToPageB = () => navigate('/page-b');
  const goToPageC = () => navigate('/page-c');

  // ...其他页面内容
};

3. 适配react-router-dom v5版本 #

如果使用v5版本，将useNavigate替换为useHistory，调整跳转语法即可：

import { useHistory, useLocation } from 'react-router-dom';

const PageA = () => {
  const history = useHistory();
  const location = useLocation();

  const goToPageD = () => {
    history.push('/page-d', { fromAtoD: true });
  };

  useEffect(() => {
    const isFromD = location.state?.fromAtoD;
    if (!isFromD) refreshPageA();
    if (isFromD) history.replace(location.pathname, {});
  }, [location, history]);
};

可选方案：全局状态标记 #

如果项目已有全局状态管理（如Context），可通过全局标记实现需求：

// 全局Context定义
import { createContext, useContext, useState } from 'react';

const RefreshContext = createContext();

export const RefreshProvider = ({ children }) => {
  const [skipRefresh, setSkipRefresh] = useState(false);
  return (
    <RefreshContext.Provider value={{ skipRefresh, setSkipRefresh }}>
      {children}
    </RefreshContext.Provider>
  );
};

// 页面A中使用
const PageA = () => {
  const { skipRefresh, setSkipRefresh } = useContext(RefreshContext);
  const location = useLocation();

  useEffect(() => {
    if (!skipRefresh) refreshPageA();
    setSkipRefresh(false); // 重置标记
  }, [location, skipRefresh, setSkipRefresh]);

  const goToPageD = () => {
    setSkipRefresh(true);
    navigate('/page-d');
  };
};

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