Using native javascript window.history.pushState but getting issue with Back button behaviour

[mgtcampbell]

Hi there,

I have a case where I have a Kanban style board view, and as the user clicks on different cards in the view, it opens up the details of the card in a sidebar. As the user clicks I am manually updating the url using window.history.pushState so that if a user then copies the link or refreshes the page, they will see the active task - I simply append the task ID as a query parameter to the url.

My issue is that if the user then clicks on an Inertia Link element to navigate to a new page, the history quickly reverts to the state before I called window.history.pushState, and so therefore if the user then clicks their Back button in their browser, they don't see the last active task they were viewing.

Example

1. User visits the board with task 123 as active
2. They click on another card and task 432 is then active and shown in the url
3. User navigates to the project home screen via an Inertia Link - you can see a flash in the url bar of the browser that it quickly reverts to ?task=123
4. User then clicks their Back button in the browser
5. User sees task 123, not 432

I do not want to use the Inertia router, as when I do router.visit it reloads all the tasks on the page, since I load them after the page loads so the initial page doesn't have to wait for all the tasks to load.

I should be able to simply use pushState myself, but it seems like it's not loading that change into Inertia's own history.

Cheers

[sadaffathali]

use 'replaceState' instead of pushState

[mgtcampbell]

Thanks for the suggestion however this doesn't change the behaviour in this case. It's also not the functionality I'm after as I want to preserve each step in the history and not replace it each time a user clicks on a different card.

[nicholashamilton]

I ran into a similar issue. It appears in order for Inertia to remember the state of the URL you have to use their Link or router.

Here's what I ended up with to mimic window.history.replaceState.
I'm thinking you could do the same without replace.

router.visit(`${window.location.pathname}${queryString}`, {
    preserveState: true,
    preserveScroll: true,
    replace: true,
    only: [],
});

I feel like they need to document this behavior better. They really don't have much information around how to handle query params without refreshing the page.

[mgtcampbell]

Thanks @nicholashamilton - I'd tried something similar before but it was reloading the whole page each time instead of just swapping out the active task. I think it was me missing preserveState perhaps.

Regardless, really appreciate you dropping an answer on this old thread!!

[nicholashamilton]

No problem! Our experiences getting this to work sound very similar.