如何使用 useSearchParams() 显示所有参数？答案

【问题标题】：How to display all parameters with useSearchParams()?如何使用 useSearchParams() 显示所有参数？
【发布时间】：2022-12-03 06:44:51
【问题描述】：

我需要获取所有 url 参数并将它们输出到一个 div 中。参数的数量可以是任意的。我怎样才能做到这一点？

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

export default function Route() {
  const [searchParams] = useSearchParams();
  for (const entry of searchParams.entries()) {
    const [param, value] = entry;
    console.log(param, value);
  }
  return <div>
    // Here I need to enter all parameters separated by commas
    //E.g. routing to `/route?name=john&age=20` renders `name=john, age=20`
    </div>;
}

【问题讨论】：

您当前拥有的console.log 的输出是什么？
我得到了正确的参数。我不知道如何在屏幕上显示它们并用逗号去除每一对

标签： reactjs react-router

【解决方案1】：

代替您的 cmets，您可以执行以下操作：

{searchParams.entries().map(([param, value]) => `${param}=${value}`).join(', ')}

如果您想花哨一点，可以在单独的 html 元素中呈现每个参数。（关注这个react documentation。

【讨论】：