react-router-navigation-prompt

React Router

Table of Contents

Overview

Example Usage

Overview

A replacement component for the react-router <Prompt/>. Allows for more flexible dialogs.

Note: When NavigationPrompt.props.when is truthy, then confirmation is requested when navigating away. Usually, browsers handle the UX themselves, leading to vanilla alert boxes. Also, many browsers require users to interact with your site before confirming navigation away.

Motivation: https://github.com/ReactTraining/react-router/issues/4635

Adapted from: https://gist.github.com/bummzack/a586533607ece482475e0c211790dd50

Example Usage

<NavigationPrompt when={this.state.shouldConfirmNavigation}>
  {({onConfirm, onCancel}) => (
    <Modal show={true}>
      <div>
        <p>Do you really want to leave?</p>
        <button onClick={onCancel}>Cancel</button>
        <button onClick={onConfirm}>Ok</button>
      </div>
    </Modal>
  )}
</NavigationPrompt>

<NavigationPrompt when={this.state.shouldConfirmNavigation}>
  {({onConfirm, onCancel}) => (
    <div>
      <p>Do you really want to leave?</p>
      <button onClick={onCancel}>Cancel</button>
      <button onClick={onConfirm}>Ok</button>
    </div>
  )}
</NavigationPrompt>

Changelog

[1.5.1] - 2017-10-25

Fixed

• When action is "POP", push ( We cannot know the correct history entry to pop to without using memory history - (https://github.com/ReactTraining/history#properties).)