Как использовать history.goBack для закрытия всплывающего окна и как закрыть всплывающее окно после его открытия по прямой ссылке - PullRequest
1 голос
/ 22 марта 2020

Я использую реагирующий маршрутизатор для открытия всплывающих окон с новым URL-адресом. Это выглядит примерно так:

<Route path="/some-url/popup" children={({ match }) => (
  <Dialog onClose={history.goBack} open={Boolean(match)}>
    <PopupContent />
  </Dialog>
)} />

Как видите, я хочу очистить историю браузера от открытия и закрытия всплывающих окон с помощью history.goBack. Но есть один случай, когда пользователь открывает сайт по прямой ссылке на это всплывающее окно, а затем пользователь не может закрыть всплывающее окно для продолжения использования сайта, так как предыдущий маршрут не с нашего сайта. И в результате пользователь перенаправляется с нашего сайта на предыдущий маршрут после нажатия всплывающей кнопки «Закрыть», но мы хотим, чтобы пользователь оставался на нашем сайте.

Я создал для вас небольшую демонстрацию для лучшего понимание https://sin9k.com/popups-routes/posts

Вы можете открыть этот сайт, нажать, например, на кнопку «Зарегистрироваться», затем закрыть всплывающее окно, и вы увидите, что вы все еще на сайте. Но если вы скопируете ссылку во всплывающем окне и вставите ее в новую вкладку в браузере, после закрытия всплывающего окна веб-сайт вернется на пустую вкладку.

Кто-нибудь знает обходной путь для этого случая?

ОБНОВЛЕНО

После некоторого исследования я создал видео-ответ на вопрос с демо и GitHub.

RU: https://youtu.be/tl5_k6YBRKg

RU: https://youtu.be/fqYk-b1lhyI

демо: https://sin9k.com/close-popup

GitHub: https://github.com/Sin9k/react-router-dom-tricks

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...