React Router中使用useNavigate传递对象报错及替代方案咨询

你遇到的报错是因为createSearchParams只支持扁平化的键值对（符合URLSearchParamsInit类型），没法直接处理包含数组的嵌套对象brc。下面是几种可行的传递方案：

1. 序列化为JSON字符串作为查询参数传递 #

把对象转成JSON字符串后编码，作为单个查询参数传递，目标组件再解码解析。优点是能完整保留对象结构，缺点是数据会暴露在URL中。

发送方代码：

const goToPosts = () => {
  // 序列化并编码，避免URL特殊字符问题
  const serializedBrc = encodeURIComponent(JSON.stringify(brc));
  navigate({
    pathname: '/posts',
    search: `?brc=${serializedBrc}`,
  });
};

接收方（Posts组件）代码：

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

const Posts = () => {
  const [searchParams] = useSearchParams();
  const brcStr = searchParams.get('brc');
  // 解码并解析回原对象
  const brc = brcStr ? JSON.parse(decodeURIComponent(brcStr)) : null;

  // 后续使用brc对象即可
  return <div>Posts页面</div>;
};

2. 通过路由state传递（推荐用于无需暴露的私密数据） #

React Router的navigate方法支持通过state属性携带额外数据，这些数据不会出现在URL中，刷新页面后会丢失（如果没有持久化处理），适合临时传递数据。

发送方代码：

const goToPosts = () => {
  navigate('/posts', {
    state: { brc }
  });
};

接收方（Posts组件）代码：

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

const Posts = () => {
  const location = useLocation();
  // 从state中取出brc，可选链避免undefined报错
  const brc = location.state?.brc;

  // 后续使用brc对象即可
  return <div>Posts页面</div>;
};

3. 扁平化嵌套对象后传递（适合简单结构） #

把嵌套对象转成扁平化的键值对，比如将数组元素转为liq[0].index=adc这类格式，再用createSearchParams处理。缺点是复杂结构的对象扁平化和还原会很繁琐。

发送方代码：

// 手动实现扁平化函数
const flattenObject = (obj, prefix = '') => {
  let result = {};
  for (const key in obj) {
    if (Array.isArray(obj[key])) {
      obj[key].forEach((item, index) => {
        Object.assign(result, flattenObject(item, `${prefix}${key}[${index}].`));
      });
    } else if (typeof obj[key] === 'object' && obj[key] !== null) {
      Object.assign(result, flattenObject(obj[key], `${prefix}${key}.`));
    } else {
      result[`${prefix}${key}`] = obj[key];
    }
  }
  return result;
};

const goToPosts = () => {
  const flatBrc = flattenObject(brc);
  navigate({
    pathname: '/posts',
    search: `?${createSearchParams(flatBrc)}`,
  });
};

接收方需要自己编写还原函数，把扁平化的参数重新组装成原对象，仅推荐结构简单的场景使用。

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