在 next.js 中获取不是动态路由参数的查询参数

Question

我有一个组件需要从 URL 复制所有查询参数。但是我不想复制动态路由参数。因此，如果它用在像这样的组件中：/pages/model/{modelId}.tsx 并且 url 是 /model/123456?page=2&sort=column&column=value，我想检索以下对象：

{
  page: 2,
  sort: "column",
  column: "value"
}

我会使用 useRouter().query，但这会包括 modelId。并且路由器对象似乎没有任何其他参数列表。

那么我如何区分常规 URL 参数和动态路由参数？

Answer 1

为什么不用 built-in URL API 代替：

const url = new URL(window.location.href);

url.searchParams.get("page"); // a string or null if not present

更进一步，您还可以将其包裹在钩子中以备将来使用。

如果您希望将搜索参数作为一个对象，您也可以将其包装在 Object.fromEntries 中：

const params = Object.fromEntries(new URL(window.location.href).searchParams);

params.page; // string or undefined now

Answer 2

在我的例子中，我从查询对象中删除了不需要的键。在这种情况下，动态 url 参数。

我为此使用了 lodash，但这仅需 Javascript 即可完美完成。

export const ignoreQueryParam = (obj, key) => _.omit(obj, key);

适用于您的情况：

const router = useRouter();
const searchQuery = ignoreQueryParam(router.query, 'modelId');

希望对您有所帮助。

Get query parameters that aren't dynamic route parameters in next.js