CODEWITHSUNDEEP
javascriptnext.jsnext-router
juhend23d
juhend23d

Reputation: 103

NextJs router push unknown key passed via urlObject

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.

Upvotes: 6

Views: 8245

Answers (2)

utdev
utdev

Reputation: 4102

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

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

The pathname is important.

Upvotes: 11

Spankied
Spankied

Reputation: 1895

What version of next are you using?

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

Upvotes: 0

Related Questions