NextJs router push unknown key passed via urlObject

Question

I have nextjs / react app in which I am using next router to add some queries to my URL. The chrome dev console gives me alot of warnings using this function:

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

This works so far but the chrome dev console throws alot of warnings which look similiar to this:

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

I also tried following approach which leads to the same warnings:

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

The function works, I properly add queries, but I would like to understand why all these warnings occur.

score 8 · Accepted Answer · answered Dec 13 '21 at 21:04

8

The parameters are incorrect it should look something similar to this:

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

The pathname is important.

answered Dec 13 '21 at 21:04

utdev

3,942
8
40
70

To make sure you remain on the same page, only updating the query, replace `pathname: '/',` with `pathname: router.pathname,` – xodeeq Dec 17 '22 at 14:54

score 0 · Answer 2 · answered Dec 11 '21 at 20:05

0

What version of next are you using?

Checkout this github issue: https://github.com/vercel/next.js/issues/17339

answered Dec 11 '21 at 20:05

Spankied

1,626
13
21

I am using 12.0.7, not related to that issue since they say that it has been fixed already – juhend23d Dec 11 '21 at 20:10

NextJs router push unknown key passed via urlObject

2 Answers2