@DanceMonkeyTime

Как слушать back button браузера и тригерить екшены (React + Next.js )?

Использую React в связке с Next.js. Есть степпер, он независим от url, а зависит от стора в редаксе.
Сейчас делаю функционал на back button и клиент хочет что-бы он был одинаковый и на кпопке кастомной и на кнопку браузерной.

Степпер находится постоянно на /new урле.

Пробую отловить нужный екшен с помочью history пакета:
import Router from 'next/router';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

history.listen((location) => {
    if (location.action === 'POP') {
        dispatch(updateScreenStep('back'));
        Router.push('/new'); // всегда обновляю урлу, что-бы не пошло дальше неё 
    }
  });


Оно работает, но с ошибками, если большая вложеность степов.
Возможно кто-то сталкивался с таким?
Как такое можна реализовать?
  • Вопрос задан
  • 357 просмотров
Пригласить эксперта
Ответы на вопрос 1
hzzzzl
@hzzzzl
возможно выйдет тупо в _app.js или в какой-нибудь основной враппер Layout.js положить обработчик события popstate?

React.useEffect(() => {
  window.addEventListener('popstate', doStuff)
  return () => {
    window.removeEventListener('popstate', doStuff)
  }
}, [doStuff])   // function doStuff() {}


а можно вопрос, как вообще redux подцепил к нексту?
я сколько не пробовал, но не вышло сделать так, чтобы стор не очищался после навигации между страницами.. но мне надо чтобы он каждый раз заполнялся при загрузке страницы через getInitialProps, и поэтому каждый раз страница заново рендерится на сервере
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы