How to manipulate browser url in Inertia.js?

Question

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.

Jedupont · Accepted Answer · 2022-05-02 07:43:27Z

2

Hashes seem to be preserved by Inertia when navigating from frontend: https://github.com/inertiajs/inertia/pull/257

However, this does not seem to be the case from the server: https://github.com/inertiajs/inertia/issues/729#issuecomment-1017619220

If this is not a problem for you, can you try simply visiting the same URL and adding the hash?

const id = entry.target.id
const urlWithFragment = `${url}#${id}`

Inertia.visit(urlWithFragment)

By default, the http method is get, but you can customize it:

Inertia.visit(urlWithFragment, {method: 'post'})

If you use ziggy you can easily recover the current route:

const currentRoute = route().current()
const url = route(currentRoute)

const urlWithFragment = `${url}#${id}`

answered May 2, 2022 at 7:43

Jedupont

4371 gold badge5 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

PHANTOM-X · Accepted Answer · 2023-07-10 04:34:52Z

0

you can use this method, in my case I have multi tabs page.

import { router } from '@inertiajs/react'


    const handleTabChange = (e) => {
        setInrtiaUrl(
            router.visit(
                route('dashboard', [user.id, { tab: e }]) // { tab: '1' } is the query parameter
            )
        )
        setIndex(e)
    }

then set handleTabChange on your onChange={(event, value) => handleTabChange(value)} method

url: http://127.0.0.1:8000/dashboard?tab=1

answered Jul 10, 2023 at 4:34

PHANTOM-X

6068 silver badges17 bronze badges

1 Comment

duhaime Jan 21 at 14:06

Where is setInrtiaUrl defined? What about route? Answers should be entirely self-contained

Collectives™ on Stack Overflow

How to manipulate browser url in Inertia.js?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related