我怎样才能包含一个数组作为 react-router-dom 参数？

Question

我想像这样传递一个数组作为

react-router-dom

参数：

website.com/[a,b,c]/

当我直接在搜索栏中键入它并使用以下代码将其转换为数组时，这会起作用：

JSON.parse(arrayParam)

之后我可以将它用作数组。

问题是，当我向某人发送上述链接时，链接变为：

website.com/%5ba,b,c%5d/

它停止工作。 我试过以下方法： 将数组传递为

website.com/a,b,c

并使用

arrayParam.split(,)

不会变成数组

我已经尝试用以下方法解码 URI

website.com/%5ba,b,c%5d

：

  const decodedArrayParam = decodeURI(arrayParam);
  const myArray = JSON.parse(decodedArrayParam);
  console.log(myArray);

哪个控制台记录

undefined

当我也对“，”进行编码时，也会发生同样的情况：

https://example.com/my-page/%5B1%2C2%2C3%5D/

或者当你改用 `decodeURIComponent' 时

这给了我同样的错误。我尝试使用

toString

首先解析URI参数，但没有成功。

任何可以达到同样目的的解决方案或变通方法？或者有什么方法可以防止原始链接发生变化？

Answer 1

一个很好的解决方法是尝试使用

atob

和

btoa

方法使用

window

.

例如，

将此数组作为参数传递到 URL 中，

arrayParam = ['a', 'b', 'c'];
console.log(window.btoa(['a', 'b', 'c'])); // YSxiLGM=

要得到另一边的精确数组，

window.atob("YSxiLGM").split(",");  // ['a', 'b', 'c']

希望这有帮助。

Answer 2

你可以为此使用 query-string