Question

我有一条被击中的nextjs路线。这是网址

localhost:8080/eft-files/133722?enableRegen=true。

在我的/pages文件夹中，这是我用来获取查询参数的代码。

const EftFileViewWrapper = () => {
  const {
    query: { eftFileId, enableRegen }
  } = useRouter();

  return (
    <EftFileView
      eftFileId={eftFileId}
      enableRegen={enableRegen}
    />
  );
};

当应用通过next/link进行路由时，最初的enableRegen是true，但是此文件第二次被命中，然后enableRegen是undefined 。 eftFileId始终被填充。

如果我在页面上进行了硬刷新，并且没有通过next/link路由到该页面，则我总是可以为所有查询参数获取正确的值。

我不得不使用URLSearchParams来完成这项工作，就像这样：

const EftFileViewWrapper = () => {
  const {
    query: { eftFileId, enableRegen }
  } = useRouter();

  let params = isInBrowser && new URLSearchParams(location.search);

  return (
    <EftFileView
      eftFileId={eftFileId}
      enableRegen={enableRegen || params.get("enableRegen")}
    />
  );
};

我宁愿留在nextjs生态系统中，但不确定该怎么做。有什么想法吗？

Answer 1

useRouter仅适用于路径，不解析查询参数。

我建议您使用window.location来获取搜索参数，然后使用URLSearchParams对其进行解析。当然，请检查是否显示了window对象：

let enableGen = false

if (typeof window !== "undefined") {
  const params = new URLSearchParams(window.location.search)
  enableGen = params.get("enableRegen")
}

为什么在使用useRouter时我的查询参数不存在？ nextjs

1 个答案: