Предотвращение изменения текущего пути React Router при ложном подтверждении - PullRequest
Новая
       44

Предотвращение изменения текущего пути React Router при ложном подтверждении

0 голосов
/ 26 января 2019

У меня проблемы с предотвращением перенаправления пути всякий раз, когда я нажимаю кнопку "Назад" в браузере, а затем нажимаю кнопку "Отмена" в окне подтверждения. 

componentDidMount() {
    window.addEventListener('popstate', this.quit);
}

quit = () => {
    if(confirm('Quit?')) {
        location.assign('/'); // Refreshes the browser then redirects to the homepage
        history.pushState(null, null, null); // Clears the previous history
    } else {
        // What to do if the user clicks "Cancel"?
    }
}

Я пытался return false, но он все еще перенаправляет приложение на домашнюю страницу (но без обновления страницы). Я пробовал другие решения, такие как location.pathname = '/currentPathname' и location.replace('/currentPathname'), но, поскольку они перезагружают браузер, он отображает Cannot get /currentPathname, потому что React Router не нужно перезагружать. Компонент <Prompt /> также не решил проблему, потому что у него нет функции prop, где я мог бы выполнить приведенный выше код.

1 Ответ

0 голосов
/ 28 января 2019

Лучшей идеей для достижения вашей первоначальной цели является использование для предотвращения нежелательной навигации.Вы также можете получить выгоду от использования componentDidMount и componentWillUnmount следующим образом: 

componentDidUpdate = () => {
    //Prompt Browser Refresh / Close
    if ("Your Condition" || true) {
      window.onbeforeunload = () => true;
    } else {
      window.onbeforeunload = undefined;
    }
};

componentDidMount() {
    this.setState({ shouldPrompt: true });
    this.props.history.listen((location, action) => {
      console.log(location);
      if (action === "POP") {
      }
    });
}

...

render() {
    return (
        <Prompt
          when={shouldPrompt}
          message="You have unsaved changes, are you sure you want to leave?"
        >
          <Switch>
            <Route path="/" component={Page1} exact />
            <Route path="/page2" component={Page2} exact />
          </Switch>
        </Prompt>
    )
}
...