ms-dred
@ms-dred
Вечно что то не то и что то не так...

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

Есть страница с данными и модельное окно.
При клике на данные открывается модельное окно с общими характеристиками товара.
Мне нужно при открытии модельного окна изменить 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 меняется, но так же за модельным окном происходит переход на страницу бренда, как мне это предотвратить?
  • Вопрос задан
  • 1077 просмотров
Решения вопроса 1
@lolpni
https://www.abenezerbelachew.com/blog/modal-routin...

P.S. Такой подход называется Modal Routing
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
ms-dred
@ms-dred Автор вопроса
Вечно что то не то и что то не так...
Как выяснил next/router использует Context API и обновляет свое внутреннее состояние, поэтому не получится осуществить данную задумку, но ее можно сделать с помощью window.history
Может кому то пригодится
window.history.replaceState(
            {
                ...window.history.state,
                as: href,
                url: href
            },
            "",
            href
        )


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

Войдите, чтобы написать ответ

Похожие вопросы