javascript - NextJs 路由器推送通过 urlObject 传递的未知 key

Question

我有 nextjs/react 应用程序，我在其中使用下一个路由器向我的 URL 添加一些查询。 chrome dev console 给了我很多使用这个功能的警告:

  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

参数不正确，应该看起来类似于:

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

路径名很重要。