React Router Navigation Prompt

https://github.com/zacharyrsmith/react-router-navigation-prompt
Admin
A React component that prompts users to confirm navigation, serving as a replacement for...
Tokens:5,776
Snippets:19
Trust Score:7.9
License:MIT
Update:11 months ago
Show doc for...
Tokens:
Raw
### Simplest React Router Navigation Prompt Example

Source: https://github.com/zacharyrsmith/react-router-navigation-prompt/blob/master/README.md

Demonstrates the most basic usage of the <NavigationPrompt/> component. It requires importing the component and a custom confirmation modal. The `when` prop controls whether the prompt is active, and the children render the custom modal with `onConfirm` and `onCancel` handlers.

```javascript
import NavigationPrompt from "react-router-navigation-prompt";

import ConfirmNavigationModal from "./your-own-code";

<NavigationPrompt when={this.state.shouldConfirmNavigation}>
  {({
    onConfirm,
    onCancel
  }) => (
    <ConfirmNavigationModal
      when={true}
      onCancel={onCancel}
      onConfirm={onConfirm}
    />
  )}
</NavigationPrompt>;
```

--------------------------------

### Manage Navigation with Lifecycle Hooks in React

Source: https://context7.com/zacharyrsmith/react-router-navigation-prompt/llms.txt

This example demonstrates how to use lifecycle hooks (beforeConfirm, afterConfirm, afterCancel) provided by react-router-navigation-prompt to manage cleanup operations and state when navigating away from a page with unsaved changes. It includes autosave functionality and handles user confirmation or cancellation of navigation.

```javascript
import React, { Component } from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import NavigationPrompt from 'react-router-navigation-prompt';

class DataEditorWithCleanup extends Component {
  state = {
    isDirty: false,
    savingData: false,
    data: { name: '', email: '' }
  };

  autosaveInterval = null;

  componentDidMount() {
    // Start autosave
    this.autosaveInterval = setInterval(() => {
      if (this.state.isDirty) {
        console.log('Autosaving...');
      }
    }, 5000);
  }

  componentWillUnmount() {
    if (this.autosaveInterval) {
      clearInterval(this.autosaveInterval);
    }
  }

  handleDataChange = (field, value) => {
    this.setState({
      isDirty: true,
      data: { ...this.state.data, [field]: value }
    });
  };

  performCleanup = (callback) => {
    console.log('Cleaning up resources...');
    // Stop autosave
    if (this.autosaveInterval) {
      clearInterval(this.autosaveInterval);
      this.autosaveInterval = null;
    }
    // Perform final save
    this.setState({ savingData: true });
    setTimeout(() => {
      console.log('Final save complete');
      this.setState({ savingData: false, isDirty: false });
      callback(); // Must call callback to proceed with navigation
    }, 1000);
  };

  handleAfterConfirm = () => {
    console.log('Navigation confirmed, user left the page');
    // Analytics or logging
  };

  handleAfterCancel = () => {
    console.log('Navigation cancelled, user stayed');
    // Restart autosave if needed
    if (!this.autosaveInterval) {
      this.autosaveInterval = setInterval(() => {
        if (this.state.isDirty) {
          console.log('Autosaving...');
        }
      }, 5000);
    }
  };

  render() {
    return (
      <div>
        <h1>Data Editor</h1>

        <input
          type="text"
          placeholder="Name"
          value={this.state.data.name}
          onChange={(e) => this.handleDataChange('name', e.target.value)}
        />
        <input
          type="email"
          placeholder="Email"
          value={this.state.data.email}
          onChange={(e) => this.handleDataChange('email', e.target.value)}
        />

        <NavigationPrompt
          when={this.state.isDirty}
          beforeConfirm={this.performCleanup}
          afterConfirm={this.handleAfterConfirm}
          afterCancel={this.handleAfterCancel}
        >
          {({ onConfirm, onCancel, isActive }) => (
            isActive && (
              <div className="modal">
                <h2>Save Changes?</h2>
                <p>Would you like to save your changes before leaving?</p>
                {this.state.savingData && <p>Saving...</p>}
                <button onClick={onCancel} disabled={this.state.savingData}>
                  Cancel
                </button>
                <button onClick={onConfirm} disabled={this.state.savingData}>
                  Save and Leave
                </button>
              </div>
            )
          )}
        </NavigationPrompt>

        <Link to="/dashboard">Go to Dashboard</Link>
      </div>
    );
  }
}

export default DataEditorWithCleanup;

```

--------------------------------

### Configure Browser Back Button Navigation in React

Source: https://context7.com/zacharyrsmith/react-router-navigation-prompt/llms.txt

This example shows how to use the `allowGoBack` prop in react-router-navigation-prompt to control navigation behavior specifically when the user clicks the browser's back button. Setting `allowGoBack` to `true` ensures that `history.goBack()` is used, providing a distinct user experience compared to standard navigation prompts.

```javascript
import React, { Component } from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import NavigationPrompt from 'react-router-navigation-prompt';

class HistorySensitivePage extends Component {
  state = {
    pageModified: false
  };

  render() {
    return (
      <div>
        <h1>Page with History Handling</h1>

        <button onClick={() => this.setState({ pageModified: true })>
          Modify Page
        </button>

        <NavigationPrompt
          when={this.state.pageModified}
          allowGoBack={true}
        >
          {({ onConfirm, onCancel }) => (
            <div className="prompt-dialog">
              <p>
                You have modified this page.
                Using allowGoBack will use history.goBack() instead of history.push().
              </p>
              <p>
                <strong>Note:</strong> This will always go back exactly 1 item in history,
                even if the user clicked back multiple times rapidly.
              </p>
              <button onClick={onCancel}>Stay</button>
              <button onClick={onConfirm}>Leave</button>
            </div>
          )}
        </NavigationPrompt>

        <p>Modified: {this.state.pageModified ? 'Yes' : 'No'}</p>
        <Link to="/page1">Page 1</Link>
        <Link to="/page2">Page 2</Link>
      </div>
    );
  }
}

export default HistorySensitivePage;

```

--------------------------------

### Conditional Navigation Blocking with Function-Based 'when' Prop (React)

Source: https://context7.com/zacharyrsmith/react-router-navigation-prompt/llms.txt

This example showcases advanced usage of NavigationPrompt where the blocking condition is determined by a function. This function receives `currentLocation`, `nextLocation`, and `action` as arguments, allowing for dynamic blocking logic. It's ideal for multi-step processes like wizards where navigation rules are complex.

```jsx
import React, { Component } from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import NavigationPrompt from 'react-router-navigation-prompt';

class MultiStepWizard extends Component {
  state = {
    currentStep: 1,
    hasStarted: false
  };

  render() {
    return (
      <div>
        <h1>Wizard - Step {this.state.currentStep}</h1>

        <NavigationPrompt
          when={(currentLocation, nextLocation, action) => {
            // Only prompt if user has started and is navigating away from wizard
            if (!this.state.hasStarted) return false;

            // Allow navigation within wizard paths (e.g., /wizard/step1 to /wizard/step2)
            if (nextLocation && nextLocation.pathname.startsWith('/wizard')) {
              return false;
            }

            // Block all other navigation
            return true;
          }}
        >
          {({ onConfirm, onCancel, isActive }) => (
            <div className="confirmation-modal" style={{ display: isActive ? 'block' : 'none' }}>
              <h3>Exit Wizard?</h3>
              <p>Progress will be lost if you leave the wizard.</p>
              <button onClick={onCancel}>Continue Wizard</button>
              <button onClick={onConfirm}>Exit Wizard</button>
            </div>
          )}
        </NavigationPrompt>

        <button onClick={() => this.setState({ hasStarted: true, currentStep: 2 }) }>
          Start Wizard
        </button>
        <Link to="/home">Go Home</Link>
        <Link to="/wizard/step2">Next Step (Allowed)</Link>
      </div>
    );
  }
}

export default MultiStepWizard;
```

--------------------------------

### Render UI When Prompt Inactive with renderIfNotActive in React

Source: https://context7.com/zacharyrsmith/react-router-navigation-prompt/llms.txt

This example shows how to use the `renderIfNotActive` prop of `react-router-navigation-prompt` to display UI elements even when the navigation prompt is not actively guarding navigation. This is useful for providing persistent status information or controls. It requires `react` and `react-router-dom`.

```javascript
import React, { Component } from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import NavigationPrompt from 'react-router-navigation-prompt';

class PageWithPersistentUI extends Component {
  state = {
    showPrompt: false,
    dataLocked: false
  };

  render() {
    return (
      <div>
        <h1>Page with Persistent UI</h1>

        <button onClick={() => this.setState({ showPrompt: !this.state.showPrompt }) }>
          Toggle Prompt: {this.state.showPrompt ? 'ON' : 'OFF'}
        </button>

        <NavigationPrompt
          when={this.state.showPrompt}
          renderIfNotActive={true}
        >
          {({ isActive, onConfirm, onCancel }) => (
            <div className="sidebar">
              {isActive ? (
                <div className="warning-panel">
                  <h3>⚠️ Confirm Navigation</h3>
                  <p>Are you sure you want to leave?</p>
                  <button onClick={onCancel}>Cancel</button>
                  <button onClick={onConfirm}>Confirm</button>
                </div>
              ) : (
                <div className="info-panel">
                  <h3>ℹ️ Navigation Status</h3>
                  <p>Protection is {this.state.showPrompt ? 'ACTIVE' : 'INACTIVE'}</p>
                  <p>This panel is always visible because renderIfNotActive={true}</p>
                </div>
              )}
            </div>
          )}
        </NavigationPrompt>

        <Link to="/other">Try to Navigate</Link>
      </div>
    );
  }
}

export default PageWithPersistentUI;
```

--------------------------------

### Disable Native Browser Prompts with disableNative in React

Source: https://context7.com/zacharyrsmith/react-router-navigation-prompt/llms.txt

This example demonstrates how to disable the default browser's `beforeunload` prompt using the `disableNative={true}` prop in `react-router-navigation-prompt`. This allows for complete custom control over the navigation warning interface, ensuring only your custom modal appears for in-app navigation. It requires `react` and `react-router-dom`.

```javascript
import React, { Component } from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import NavigationPrompt from 'react-router-navigation-prompt';

class NoNativePromptPage extends Component {
  state = {
    hasUnsavedWork: false
  };

  render() {
    return (
      <div>
        <h1>Custom-Only Navigation Prompt</h1>

        <textarea
          placeholder="Type here to trigger protection..."
          onChange={(e) => this.setState({
            hasUnsavedWork: e.target.value.length > 0
          })}
        />

        <NavigationPrompt
          when={this.state.hasUnsavedWork}
          disableNative={true}
        >
          {({ onConfirm, onCancel }) => (
            <div className="custom-modal">
              <h2>Custom Modal Only</h2>
              <p>
                This will show for in-app navigation, but NOT for:
                - Closing the browser tab
                - Reloading the page
                - Navigating to external URLs
              </p>
              <p>
                Use disableNative={true} when you want full control and
                don't want browser's beforeunload dialog.
              </p>
              <button onClick={onCancel}>Cancel</button>
              <button onClick={onConfirm}>Proceed</button>
            </div>
          )}
        </NavigationPrompt>

        <p>Try closing the tab or reloading - no browser prompt will appear</p>
        <Link to="/somewhere">Navigate in App (will show custom prompt)</Link>
      </div>
    );
  }
}

export default NoNativePromptPage;
```

--------------------------------

### Complex React Router Navigation Prompt with Custom Logic

Source: https://github.com/zacharyrsmith/react-router-navigation-prompt/blob/master/README.md

Illustrates a more advanced use case for <NavigationPrompt/>, featuring custom confirmation logic via the `when` prop as a function, a `beforeConfirm` callback for cleanup, and conditional rendering based on the prompt's active state. It shows how to integrate a custom modal with explicit cancel and confirm buttons.

```javascript
import NavigationPrompt from "react-router-navigation-prompt";

import Modal from "./your-own-code";

<NavigationPrompt
  beforeConfirm={(clb) => this.cleanup(clb)} //call the callback function when finished cleaning up
  // Children will be rendered even if props.when is falsey and isActive is false:
  renderIfNotActive={true}
  // Confirm navigation if going to a path that does not start with current path:
  when={(crntLocation, nextLocation, _action) =>
    !nextLocation || !nextLocation.pathname.startsWith(crntLocation.pathname)
  }
>
  {({
    isActive,
    onCancel,
    onConfirm
  }) => {
    if (isActive) {
      return (
        <Modal show={true}>
          <div>
            <p>Do you really want to leave?</p>
            <button onClick={onCancel}>Cancel</button>
            <button onClick={onConfirm}>Ok</button>
          </div>
        </Modal>
      );
    }
    return <div>This is probably an anti-pattern but ya know...</div>;
  }}
</NavigationPrompt>;
```

--------------------------------

### Basic NavigationPrompt with Simple Confirmation (React)

Source: https://context7.com/zacharyrsmith/react-router-navigation-prompt/llms.txt

This snippet demonstrates a minimal implementation of NavigationPrompt. It blocks navigation when the `formIsDirty` state is true and renders a custom confirmation modal. The modal provides options to stay on the page or leave, triggering `onCancel` or `onConfirm` respectively. It's useful for forms with unsaved changes.

```jsx
import React, { Component } from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import NavigationPrompt from 'react-router-navigation-prompt';

class FormPage extends Component {
  state = {
    formIsDirty: false,
    formData: ''
  };

  handleInputChange = (e) => {
    this.setState({
      formIsDirty: true,
      formData: e.target.value
    });
  };

  render() {
    return (
      <div>
        <h1>Edit Form</h1>
        <input
          type="text"
          value={this.state.formData}
          onChange={this.handleInputChange}
          placeholder="Start typing to make form dirty..."
        />

        <NavigationPrompt when={this.state.formIsDirty}>
          {({ onConfirm, onCancel }) => (
            <div className="modal-overlay">
              <div className="modal-dialog">
                <h2>Unsaved Changes</h2>
                <p>You have unsaved changes. Are you sure you want to leave?</p>
                <button onClick={onCancel}>Stay on Page</button>
                <button onClick={onConfirm}>Leave Page</button>
              </div>
            </div>
          )}
        </NavigationPrompt>

        <nav>
          <Link to="/other">Navigate Away</Link>
        </nav>
      </div>
    );
  }
}

export default FormPage;
```

--------------------------------

### React Bootstrap Modal Integration for Navigation Prompts

Source: https://context7.com/zacharyrsmith/react-router-navigation-prompt/llms.txt

This React component demonstrates integrating react-router-navigation-prompt with React Bootstrap's Modal for handling unsaved changes. It manages form input, tracks the 'dirty' state, and displays a confirmation modal using Bootstrap components when navigation is attempted while the form is modified. Requires 'react-router-dom', 'react-router-navigation-prompt', and 'react-bootstrap'.

```javascript
import React, { Component } from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import NavigationPrompt from 'react-router-navigation-prompt';
import { Modal, Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

class BootstrapIntegrationExample extends Component {
  state = {
    formData: {
      username: '',
      email: '',
      bio: ''
    },
    isDirty: false
  };

  handleFieldChange = (field, value) => {
    this.setState({
      formData: { ...this.state.formData, [field]: value },
      isDirty: true
    });
  };

  handleSave = () => {
    console.log('Saving form data:', this.state.formData);
    this.setState({ isDirty: false });
  };

  render() {
    return (
      <div className="container mt-4">
        <h1>User Profile Editor</h1>

        <form>
          <div className="form-group">
            <label>Username</label>
            <input
              type="text"
              className="form-control"
              value={this.state.formData.username}
              onChange={(e) => this.handleFieldChange('username', e.target.value)}
            />
          </div>

          <div className="form-group">
            <label>Email</label>
            <input
              type="email"
              className="form-control"
              value={this.state.formData.email}
              onChange={(e) => this.handleFieldChange('email', e.target.value)}
            />
          </div>

          <div className="form-group">
            <label>Bio</label>
            <textarea
              className="form-control"
              value={this.state.formData.bio}
              onChange={(e) => this.handleFieldChange('bio', e.target.value)}
              rows="4"
            />
          </div>

          <Button variant="primary" onClick={this.handleSave}>
            Save Profile
          </Button>
        </form>

        <NavigationPrompt when={this.state.isDirty}>
          {({ isActive, onConfirm, onCancel }) => (
            <Modal show={isActive} onHide={onCancel}>
              <Modal.Header closeButton>
                <Modal.Title>Unsaved Changes</Modal.Title>
              </Modal.Header>

              <Modal.Body>
                <p>You have unsaved changes to your profile.</p>
                <p>If you leave now, your changes will be lost.</p>
              </Modal.Body>

              <Modal.Footer>
                <Button variant="secondary" onClick={onCancel}>
                  Continue Editing
                </Button>
                <Button variant="danger" onClick={onConfirm}>
                  Discard Changes
                </Button>
              </Modal.Footer>
            </Modal>
          )}
        </NavigationPrompt>

        <div className="mt-3">
          <Link to="/dashboard">Dashboard</Link> |
          <Link to="/settings">Settings</Link>
        </div>
      </div>
    );
  }
}

export default BootstrapIntegrationExample;

```

--------------------------------

### TypeScript Form with Navigation Prompt

Source: https://context7.com/zacharyrsmith/react-router-navigation-prompt/llms.txt

This snippet implements a login form using TypeScript and React. It utilizes react-router-navigation-prompt to prevent users from losing unsaved form data by displaying a confirmation modal when they attempt to navigate away. The prompt logic is type-safe and includes an asynchronous save operation.

```typescript
import * as React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import NavigationPrompt, { ChildData } from 'react-router-navigation-prompt';
import * as H from 'history';

interface FormState {
  email: string;
  password: string;
  isModified: boolean;
  isSaving: boolean;
}

class TypeScriptFormExample extends React.Component<{}, FormState> {
  state: FormState = {
    email: '',
    password: '',
    isModified: false,
    isSaving: false
  };

  handleInputChange = (field: keyof Pick<FormState, 'email' | 'password'>, value: string): void => {
    this.setState({
      [field]: value,
      isModified: true
    } as Pick<FormState, keyof FormState>);
  };

  shouldBlockNavigation = (
    currentLocation: H.Location,
    nextLocation?: H.Location,
    action?: H.Action
  ): boolean => {
    // Type-safe navigation logic
    if (!this.state.isModified) return false;
    if (nextLocation && nextLocation.pathname === '/save') return false;
    return true;
  };

  handleBeforeConfirm = (callback: () => void): void => {
    this.setState({ isSaving: true });

    // Simulate async save operation
    setTimeout(() => {
      console.log('Data saved:', {
        email: this.state.email,
        password: '***'
      });
      this.setState({ isSaving: false, isModified: false });
      callback();
    }, 1500);
  };

  renderPromptContent = ({ isActive, onConfirm, onCancel }: ChildData): React.ReactNode => {
    if (!isActive) return null;

    return (
      <div className="modal-overlay" role="dialog" aria-modal="true">
        <div className="modal-content">
          <h2>Confirm Navigation</h2>
          <p>You have unsaved changes. Would you like to save before leaving?</p>

          {this.state.isSaving && (
            <div className="spinner">Saving...</div>
          )}

          <div className="button-group">
            <button
              onClick={onCancel}
              disabled={this.state.isSaving}
              aria-label="Cancel navigation"
            >
              Cancel
            </button>
            <button
              onClick={onConfirm}
              disabled={this.state.isSaving}
              aria-label="Confirm navigation"
            >
              {this.state.isSaving ? 'Saving...' : 'Save & Leave'}
            </button>
          </div>
        </div>
      </div>
    );
  };

  render(): React.ReactNode {
    return (
      <div>
        <h1>Login Form (TypeScript)</h1>

        <div className="form-group">
          <label htmlFor="email">Email:</label>
          <input
            id="email"
            type="email"
            value={this.state.email}
            onChange={(e) => this.handleInputChange('email', e.target.value)}
          />
        </div>

        <div className="form-group">
          <label htmlFor="password">Password:</label>
          <input
            id="password"
            type="password"
            value={this.state.password}
            onChange={(e) => this.handleInputChange('password', e.target.value)}
          />
        </div>

        <NavigationPrompt
          when={this.shouldBlockNavigation}
          beforeConfirm={this.handleBeforeConfirm}
          renderIfNotActive={false}
          disableNative={false}
        >
          {this.renderPromptContent}
        </NavigationPrompt>

        <nav>
          <Link to="/dashboard">Dashboard</Link>
          <Link to="/profile">Profile</Link>
        </nav>
      </div>
    );
  }
}

export default TypeScriptFormExample;

```
Tokens:
Raw