I have a Next.js/React application where I am utilizing the Next Router to include some queries in my URL. However, when using the following function, the Chrome Dev Console displays numerous warnings:
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 })
}
The functionality is working as intended so far, but the Chrome Dev Console shows warnings like these:
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
...
Even trying an alternative approach yields the same result with the 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 successfully adds the queries, but I'm curious to understand the reason behind these warning messages.