Update query in current route

[luisatmaniak]

Hi,

I want to programmatically update the query string in the current route, using native next router this could be done using:

// from withRouter
props.router.push({pathname: router.pathname, {query: { myParam: 'some-value' }})

This doesn't work with next-routes because router.pathname is ignorant of next-routes route alises.

I could make this work if we could:

1. Get current URL in next-router
2. Find a programmatic way to update query params in next-router

I also tried:

import routes, { Router } from './routes'

...
// router is from withRouter
const route = routes.match(router.asPath).parsedUrl
route.query.myParam = 'my-value'
Router.pushRoute(route.format())
``

But `parsedUrl` doesn't contain the query params, they are not parsed (i.e. remain in parsedUrl.search). 

Any ideas?

[joncursi]

I'm also trying to update the query params on the existing route. My use-case is a search page, where the user can toggle on/off various filters.

A good example of this is cars.com: https://www.cars.com/for-sale/searchresults.action/?mdId=26381&mkId=20021&page=1&perPage=20&rd=20&searchSource=GN_BREADCRUMB&shippable=false&showMore=true&sort=relevance&zc=08096

[joncursi]

@luisatmaniak did you happen to find a method that can achieve this?

[renato]

I'm sorry, I'm probably misunderstanding the issue here, but I'm using Router.replaceRoute on the pages I need the search string to be on the url's query params.

[DonovanCharpin]

Hi guys,

I'm experiencing the same issue, it seems there is no way to use pushRoute with only the query changing. I have something like /profile/:username.

I think I tried almost everything possible with pushRoute :

Router.pushRoute('routeName', {username: newUsername})
Router.pushRoute('routeName', {username: newUsername}, {shallow: true})
Router.pushRoute(`/profile/${username}`)

I also tried with the push :

Router.push(`/profile/${username}`)
Router.push(`/profile/${username}`, `/profile/${username}`)
Router.push(`/profile/${username}`, `/profile/${username}`, {shallow: true})

With the push, it kind of works because it reload the page every time so the server side just handle it but there is not way to make it works on the client side without reloading the page. When I check the this.props.router query on my componentWillReceiveProps, the current props and nextProps are the same.

Did you guys solved this?

[skywickenden]

Is there a resolution or at least a work around to this yet?

[tommhuth]

Any news on this? Changes in query params should be reflected in the url as well, particularly if this is available in pure NextJS.