如何在全应用中传递useLocation的state参数？

由于你无法使用localStorage或Redux，以下几种方案可以帮你在应用中全局传递路由state中的值，避免每次跳转重复传递：

1. 使用React Context API（推荐） #

这是最适合你的场景的方案，无需额外依赖，能安全地在组件树中共享数据，且不会暴露到URL或本地存储。

步骤1：创建全局Context #

// AppContext.js
import { createContext, useContext, useState } from 'react';

// 创建Context
const AppContext = createContext();

// 封装Provider组件，用于提供全局状态
export function AppProvider({ children, initialState }) {
  const [appState, setAppState] = useState(initialState || {});

  return (
    <AppContext.Provider value={{ appState, setAppState }}>
      {children}
    </AppContext.Provider>
  );
}

// 封装自定义Hook，简化Context调用
export function useAppContext() {
  return useContext(AppContext);
}

步骤2：在根组件挂载Provider #

确保你的路由组件被AppProvider包裹，这样所有子组件都能访问Context：

// App.jsx
import { AppProvider } from './AppContext';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <AppProvider>
      <Router>
        {/* 你的路由配置 */}
        <Routes>
          <Route path="/ListServiceConfer" element={<ListServiceConfer />} />
          {/* 其他路由 */}
        </Routes>
      </Router>
    </AppProvider>
  );
}

步骤3：将路由state存入Context #

在接收路由state的目标组件中，把拿到的state存入Context：

// ListServiceConfer.jsx
import { useLocation, useEffect } from 'react-router-dom';
import { useAppContext } from './AppContext';

function ListServiceConfer() {
  const location = useLocation();
  const { setAppState } = useAppContext();

  // 组件挂载时，将路由state同步到全局Context
  useEffect(() => {
    if (location.state) {
      setAppState(location.state);
    }
  }, [location.state, setAppState]);

  // 组件其他逻辑...
}

步骤4：在任意组件中获取全局状态 #

之后在应用的任何组件里，直接通过自定义Hook获取数据：

// 任意组件
import { useAppContext } from './AppContext';

function AnyComponent() {
  const { appState } = useAppContext();
  const { name, family, Id } = appState;

  // 直接使用这些值即可
  return (
    <div>
      <p>ID: {Id}</p>
      <p>Name: {name}</p>
    </div>
  );
}

2. 路由参数传递（仅适用于非敏感数据） #

如果你的数据不涉及敏感信息（比如Id不是隐私数据），可以将数据嵌入URL的路径或查询参数中，这样无需依赖任何状态管理，直接通过路由API获取。

跳转时传递参数 #

// 编码特殊字符避免URL解析问题
navigate(`/ListServiceConfer/${Id}?name=${encodeURIComponent(name)}&family=${encodeURIComponent(family)}`);

组件中获取参数 #

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

function ListServiceConfer() {
  // 获取路径参数中的Id
  const { Id } = useParams();
  // 获取查询参数中的name和family
  const [searchParams] = useSearchParams();
  const name = decodeURIComponent(searchParams.get('name'));
  const family = decodeURIComponent(searchParams.get('family'));

  // 使用数据...
}

⚠️ 注意：这种方案会将数据暴露在URL中，敏感数据不建议使用，且复杂数据（如对象）传递起来比较麻烦。

3. 封装自定义跳转Hook（简化路由state传递） #

如果必须保留通过路由state传递的方式，可封装一个自定义Hook，自动携带全局Context中的状态，避免每次手动写入：

// useNavigateWithState.js
import { useNavigate } from 'react-router-dom';
import { useAppContext } from './AppContext';

export function useNavigateWithState() {
  const navigate = useNavigate();
  const { appState } = useAppContext();

  // 返回自动携带全局状态的跳转函数
  return (path) => {
    navigate(path, { state: appState });
  };
}

使用自定义Hook跳转 #

import { useNavigateWithState } from './useNavigateWithState';

function SomeComponent() {
  const navigateWithState = useNavigateWithState();

  // 跳转时自动携带全局状态
  const handleJump = () => {
    navigateWithState('/AnotherPage');
  };

  return <button onClick={handleJump}>跳转</button>;
}

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