How to manipulate browser url in Inertia.js?

[Arturexe]

I've been using an IntersectionObserver to update the url of my SPA while the user scrolls down the page like so:

const sections = document.querySelectorAll('section')
const options = {
    threshold: 0.5
}
const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            router.push('#' + entry.target.id)
        }
    })
}, options)
sections.forEach(section => {
    observer.observe(section)
})

but how do I do this in Inertia.js since it doesn't have the router.push method? I'm using Inertia with a Vue 3 frontend.

[Wulfheart]

I used something like window.history.pushState(). But this still caused some flickering in the url bar.

[blauweb]

I used the same, and this doesn't work actually if i want to change the url right after the page loads - I am trying to add url parameters for better user experience. It changes the url and then reverts back to the original route without parameters. I stuck in a loop...

// EDIT.
I managed to solve this!

Using: Vue <script setup>:
I had to use both onMounted() and nextTick() within onMounted(); and after putting all the logic within nextTick, the flickering is gone, and the URL only updateds when needed.

[FrozenGod]

Trying to fix the exact same thing in React now. Tried a thousand approaches already, useEffect, Refs, callback, timeouts, and what not. This just won't work no matter what. It's impossible to change the URL without it reverting back to where it was instantly. Why does Inertia have to suck so hard compared to any other framework...

[trevone]

I had the same issue, and solved it like this:

instead of using window.history.pushState()

you need to update the router object in inertia like this:

let p = router.page  
p.url = '/stuff-to-replace-in-address-bar'
router.setPage(p)

then when inertia decide to do its nonsense things are still there

[oceanapplications]

This comment is a life saver and should be part of the official docs.

[aaronaccessvr]

I second the vote for this finding its way into documentation somewhere. 👍 for API docs.

[gabriel-brunet-cmm]

I had the same issue and needed to not add to the history. I was using window.history.replaceState(null, '', newUrl) but was getting an error that at first did not associate with this :

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'page')

Then I found the documnentation for Inertia here] : https://inertiajs.com/manual-visits#browser-history and changed my line to this which fixed my issue :

import { router } from "@inertiajs/vue3";
//... 
router.visit(newUrl, {replace: true, preserveState: true});