如何在react-router-dom中传递数组参数并解决编码失效问题

核心问题分析 #

你遇到的问题本质是：URL中特殊字符（如[、]）会被自动编码，且原始传递的数组格式（如[a,b,c]）并非合法JSON字符串，导致分享后解析失败；同时阻止回退的代码会丢失URL参数，加剧问题。

解决方案 #

方案一：修正路径参数的编码与解析逻辑 #

如果坚持使用路径参数，需确保传递的是合法JSON字符串，并正确处理编码：

1. 生成合法的分享链接

在生成链接时，先将数组转为JSON字符串并编码，避免分享时乱码：

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

const targetArray = ["a", "b", "c"];
// 转成合法JSON后编码
const encodedParam = encodeURIComponent(JSON.stringify(targetArray));

// 生成的链接格式：/%5B%22a%22%2C%22b%22%2C%22c%22%5D
<Link to={`/${encodedParam}`}>分享数组链接</Link>

2. 接收参数时解码并安全解析

在main.js中添加错误处理，确保解析失败时不会返回undefined：

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

const { arrayParam } = useParams();
let myArray = [];

try {
  // 双重解码确保处理所有编码情况
  const decodedParam = decodeURIComponent(arrayParam);
  myArray = JSON.parse(decodedParam);
} catch (err) {
  console.error("数组参数解析失败：", err);
  // 解析失败时设置默认值或提示用户
}

console.log(myArray); // 输出 ["a", "b", "c"]

方案二：改用查询参数（推荐） #

路径参数适合单一标识，查询参数更适配数组这类复杂结构，且编码问题更少：

1. 修改路由配置（app.js）

无需路径参数，匹配固定路径即可：

<Router>
  <Routes>
    <Route path="/" element={<Main className={styles.main} />} />
  </Routes>
</Router>

2. 生成带查询参数的链接

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

const targetArray = ["a", "b", "c"];
const searchParams = new URLSearchParams();
// 转JSON并编码后作为查询参数
searchParams.set('array', encodeURIComponent(JSON.stringify(targetArray)));

// 生成的链接格式：/?array=%5B%22a%22%2C%22b%22%2C%22c%22%5D
<Link to={`/?${searchParams.toString()}`}>分享数组链接</Link>

3. 接收查询参数

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

const [searchParams] = useSearchParams();
let myArray = [];

try {
  const arrayStr = searchParams.get('array');
  if (arrayStr) {
    const decodedStr = decodeURIComponent(arrayStr);
    myArray = JSON.parse(decodedStr);
  }
} catch (err) {
  console.error("数组参数解析失败：", err);
}

console.log(myArray); // 输出 ["a", "b", "c"]

方案三：修复阻止回退代码的参数丢失问题 #

你的回退拦截代码会通过window.location.pathname丢弃查询参数/路径参数的完整信息，需修改为保留完整URL：

useEffect(() => {
  // 保留完整的路径+查询参数
  const fullUrl = `${window.location.pathname}${window.location.search}`;
  window.history.pushState(null, null, fullUrl);
  window.addEventListener('popstate', onBackButtonEvent);
  
  return () => {
    window.removeEventListener('popstate', onBackButtonEvent);
  };
}, []);

const onBackButtonEvent = (e) => {
  e.preventDefault();
  if (!finishStatus) {
    if (window.confirm(
      "You cannot go back to a previous page, \
      Please close the window if you wish to exit"
    )) {
      setfinishStatus(true);
    } else {
      const fullUrl = `${window.location.pathname}${window.location.search}`;
      window.history.pushState(null, null, fullUrl);
      setfinishStatus(false);
    }
  }
};

为什么之前的方案失败？ #

1. 逗号分隔方案：若阻止回退代码删除了参数，RouterParams.arrayParam会变为undefined，调用split(',')会直接报错，导致myArray为undefined。
2. 直接解码解析：原始传递的[a,b,c]并非合法JSON（字符串未加引号），JSON.parse会抛出错误，若未添加错误处理，变量会保持undefined。

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