Ограничить обратную кнопку React Router

Question

Я хотел бы ограничить доступ к моему маршрутизатору и отключить кнопку возврата.

Например, если пользователь вручную набирает текст на вкладке браузера или щелкает URL-адрес, отличный от event/:eventId, я хочу перенаправить он на event/:eventId

Текущий:

1. Пользователь посещает event/1234/friends.
2. Он перенаправляется на event/1234
3. Пользователь нажимает кнопку "Назад" и видит event/1234/friends. (Он должен не иметь возможность посещать event/1234/friends).

Примечание. Эта ошибка возникает только на мобильных устройствах. Вы не можете воспроизвести его на рабочем столе.

Желательно:

1. Пользователь посещает event/1234/friends.
2. Он перенаправляется на event/1234
3. Отключите кнопку "Назад", или если пользователь нажмет кнопку "Назад", он не сможет посетить event/1234/friends

Так выглядит мой код

 const eventPathname = props.history?.location?.pathname;
  const matches = eventPathname.match(/^\/event\/([^/]+)\/.+$/);
  if (!!matches) {
    const defaultPathname = `/event/${matches[1]}`;
    props.history.length = 1;
    window.location.replace(defaultPathname);
    props.history.push(defaultPathname);
  }

И вот песочница кода:

https://codesandbox.io/s/keen-silence-47ztr

Помните, что вы не можете воспроизвести его на рабочем столе, только на мобильном телефоне.

Я проверил несколько потоков в StackOverflow, например 1 , 2 , 3 , 4 , но я не смог найти правильный ответ. Любая помощь в том, как я могу этого добиться?

Answer 1

Вы можете просто использовать history.replace (не pu sh)

if (!!matches) {
    const defaultPathname = `/event/${matches[1]}`;
    //props.history.length = 1; //<---- probably not required
    //window.location.replace(defaultPathname); //<---- not required
    props.history.replace(defaultPathname); //<---- like this
  }

Edit : Некоторое объяснение

Основное различие между push и replace заключается в том, что push создаст новую запись в истории браузера, а replace просто заменит текущее состояние. Таким образом, вы не обнаружите, что кнопка возврата активирована.

Некоторые ссылки :

1

2

3

4