NextJs 路由器推送通过 urlObject 传递的未知密钥

Question

我有 nextjs/react 应用程序，我在其中使用下一个路由器向我的 URL 添加一些查询。 chrome 开发控制台使用此功能给了我很多警告：

  const putTargetsToQueryParams = (targets: IFragranceNote[]) => {
    const data = targets.map(t => encodeURI(t.name)).join(',')
    router.query.fragranceNote = data
    router.push({ ...router, query: data }, undefined, { shallow: true })
  }

这到目前为止有效，但 chrome 开发控制台抛出很多警告，看起来与此类似：

react_devtools_backend.js:2540 Unknown key passed via urlObject into url.format: route
react_devtools_backend.js:2540 Unknown key passed via urlObject into url.format: asPath
react_devtools_backend.js:2540 Unknown key passed via urlObject into url.format: components
react_devtools_backend.js:2540 Unknown key passed via urlObject into url.format: isFallback
react_devtools_backend.js:2540 Unknown key passed via urlObject into url.format: basePath
react_devtools_backend.js:2540 Unknown key passed via urlObject into url.format: locale
react_devtools_backend.js:2540 Unknown key passed via urlObject into url.format: locales
react_devtools_backend.js:2540 Unknown key passed via urlObject into url.format: defaultLocale
react_devtools_backend.js:2540 Unknown key passed via urlObject into url.format: isReady
react_devtools_backend.js:2540 Unknown key passed via urlObject into url.format: isPreview
react_devtools_backend.js:2540 Unknown key passed via urlObject into url.format: isLocaleDomain
react_devtools_backend.js:2540 Unknown key passed via urlObject into url.format: domainLocales

我还尝试了以下导致相同警告的方法：

  const putTargetsToQueryParams = (targets: IFragranceNote[]) => {
    const data = targets.map(t => encodeURI(t.name)).join(',')
    router.push({ ...router, query: { ...router.query, fragranceNote: data } }, undefined, { shallow: true })
  }

函数有效，我正确地添加了查询，但我想了解为什么会出现所有这些警告。

Answer 1

您使用的 next 是什么版本？

检查这个 github 问题：https://github.com/vercel/next.js/issues/17339

Answer 2

参数不正确，应该类似于这样：

router.push({ 
  pathname: '/', 
  query: { ...router.query, fragranceNote: data } }, 
  undefined, 
  {}
)

路径名很重要。

NextJs 路由器推送通过 urlObject 传递的未知密钥

NextJs router push unknown key passed via urlObject

javascript

next.js

next-router