history.state is getting clobbered by Router

[fangeugene]

Bug report

Describe the bug

Entries added to history.state are not preserved after navigating away and back to the page.

To Reproduce

1. On any page, enter history.replaceState({ ...history.state, hello: 'world' }, location.href) in the console
2. Click on a link that navigates away from the page
3. Click "back" in the browser
4. See that console.log(history.state) does not include {hello: 'world'}

Expected behavior

{hello: 'world'} to be a part of the state.

System information

• OS: Ubuntu 18.04
• Browser: Chrome, Firefox
• Version of Next.js: 8.1.0

[ijjk]

Hi, this is on purpose to fix re-rendering after navigating back from external sites. Related PR here.

[fangeugene]

@ijjk thanks for the quick response. That PR seems to be about navigating to an external site and navigating back, whereas I'm describe a case where the link is internal.

As an aside, why does adding the the fromExternal tag need to clobber the state? Can't fromExternal be merged with the existing state?

Thanks!

[ijjk]

Oh I see I took "navigates away" as meaning to an external site. The reason we don't merge with the existing state is to prevent misusing history.state. What is your use case for wanting to manipulate history.state manually?

[fangeugene]

I have two main use cases. 1) I have a list of items that users can filter by. After filtering and clicking on an item, and then navigating back, I need to persist the filter settings and not just display the whole list again. 2) I have some UI that opens up a modal, and that modal can open up another modal, and so on. Each of these modals are contextually different, so the as url changes to match the item in the modal (like when you click on a tweet in Twitter, the tweet expands and the url changes), so users need to be able to use history to navigate through back through them. Closing the stack of modals needs to go back in history N times. However, I need a way to save the value of N to the state history so that if a user navigates away from the page and then back, the value of N is still available.

I can technically solve all of this with url params, but seems less ergonomic than using history state.

Ideally this would work when navigating through history for both internal links and those that leave the site.

Thanks!

[ijjk]

In this case I would recommend using query values in href which you can hide using as. This allows you to maintain state without having to interfere with history.state.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.