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.
The parameters are incorrect it should look something similar to this:
router.push({
pathname: '/',
query: { ...router.query, fragranceNote: data } },
undefined,
{}
)
The pathname is important.