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

【问题标题】：NextJs router push unknown key passed via urlObjectNextJs 路由器推送通过 urlObject 传递的未知密钥
【发布时间】：2022-01-15 23:12:15
【问题描述】：

我有 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 })
  }

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

【问题讨论】：

标签： javascript next.js next-router

【解决方案1】：

参数不正确应该是这样的：

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

路径名很重要。

【讨论】：

【解决方案2】：

你用的是什么版本的next？

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

【讨论】：

我使用的是 12.0.7，与该问题无关，因为他们说它已经修复