Next.js: No way to change url without triggering navigation despite what docs say

[arrowplum]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Need to be able to update url without any navigation ie a history.replaceState

The docs say in https://github.com/zeit/next.js#imperatively:

Note: in order to programmatically change the route without triggering navigation and component-fetching, use props.url.push and props.url.replace within a component

Current Behavior

The call gives a deprecation warning and still triggers navigation

Steps to Reproduce (for bugs)

1. use props.url.replace within a component
2. notice that a navigation is triggered.
   3.
   4.

Context

I am trying to update the url without anything else changing. A way to do a history.replaceState in the next.js world. Calling history.replaceState steps outside the next.js router and then messes up
back navigation. Using {shallow:true} with Router.replace still calls componentWillReceiveProps.

[JustasPolis]

Try Router.push(url, as, {shallow:true}).

[arrowplum]

I mentioned above that I had tried using {shallow:true} what I meant is that I had used Router.replace(url, as, {shallow:true})

[JulesAU]

I'm encountering the same problem. Using shallow:true gives the appearance of working, but then when you use the back/forward buttons to effect a state change, the "shallow" nature of the URL is persisted and getInitialProps still isn't called when it in fact should be.

[dbo]

@arrowplum After debugging this I am not sure whether this is a real bug. In contrast to normal routing, shallow routing is not causing a getInitialProps call. The live component still receives news props, but I think this is correct, because the pathname/query has changed (props.url).
So the only chance to distinct these cases from within componentWillReceiveProps is to check for the initial props. In the case of a redux setup this is easy, because the initialStoreState has changed then, otherwise it's been a shallow routing.

[arrowplum]

closing old issue since @dbo has found the root cause.

[shakesBeardZ]

@dbo what's the real cause? am having the same issue

[timneutkens]

https://github.com/zeit/next.js/issues/2833#issuecomment-414919347

[dbo]

@shakesBeardZ I think it's correct for the page to receive new props (even on shallow routing), since the url has changed per props. But the main difference is, that getInitialProps is not called in case of a shallow routing.

[johhansantana]

I'm not sure what the answer here is but I don't seem to get the url to change without the page replacing the view using shallow: true

https://codesandbox.io/s/7zrpz5wo0j

Should it be done using window.history.pushState?

I'm trying to achieve what this example has https://github.com/now-examples/nextgram/blob/master/pages/index.js#L58-L62

[Sebastp]

any fix for this one?

[krasevych]

any fix for this one?

[raulrene]

@johhansantana @sebas5384 I worked around this with history.pushState.

Some people emphasized on the importance of the second param, as, when working with Router.push(url, as, { shallow: true }). I didn't manage to get it working on serverless no matter what combination of url and as I was using, so I falled back to the history API

[xe4me]

if as and url match, shallow will work .

I had

Router.replace(`/users`, `/users?${queryString}`, {shallow: true});

This caused reload

Now I have

Router.replace(`/users?${queryString}`, `/users?${queryString}`, {shallow: true});

This worked