Как в Next.js изменить url страницы без обновления данных?

Question

[Станислав]

Есть страница с данными и модельное окно.
При клике на данные открывается модельное окно с общими характеристиками товара.
Мне нужно при открытии модельного окна изменить URL страницы, а при закрытии его, вернуть предыдущую страницу URL
К примеру у есть страница с товарами
/catalogs/brends
Есть так же страница бренда
/brend/name/
При клике по элементу у меня открывается модельное окно с содержимым из страницы /brend/name/
И соответственно URL должен измениться с /catalogs/brends на /brend/name/
А при закрытии окна нужно вернуться на страницу /catalogs/brends

На данный момент я делаю вот что

const handlePress = (e: any) => {
        e.preventDefault()
        store.setContentModal(<BrendComponent document={props} title={""} />)
        store.setOpenModal(true)

        router.push({
            pathname: props.href,
        },
            undefined, { shallow: true}
        )
    }

При этом открывается модельное окно, все необходимые данные загружаются, URL меняется, но так же за модельным окном происходит переход на страницу бренда, как мне это предотвратить?

Comments

[szQocks]

Чисто из интереса хотелось бы узнать что ты там за стор такой юзаешь что прокидываешь туда целый компонент ?

[lolpni]

https://www.abenezerbelachew.com/blog/modal-routin...

Это не то, что вам нужно было?

[Станислав]

lolpni, именно это я и пытаюсь реализовать, спасибо большое =) Создайте ответ, я приму это как решение =)

Answer 1

[lolpni]

https://www.abenezerbelachew.com/blog/modal-routin...

P.S. Такой подход называется Modal Routing

Answer 2

[Станислав]

Как выяснил next/router использует Context API и обновляет свое внутреннее состояние, поэтому не получится осуществить данную задумку, но ее можно сделать с помощью window.history
Может кому то пригодится

window.history.replaceState(
            {
                ...window.history.state,
                as: href,
                url: href
            },
            "",
            href
        )

В целом мне нужно было с эмитировать визуально переход на новую страницу и возврат к предыдущей во время открытия и закрытия модельного окна, с изменением URL, TITLE. Получилось все отлично =)