Display custom components for react router's routerWillLeave hook
Latest commit 5d02053 Dec 27, 2016 @a-axton readme formatting


React Router Confirm Navigation

Displays a custom component to confirm or cancel a react-router navigation. Uses react-router's routerWillLeave hook under the hood.

Note: This project is in active development. Breaking API changes may happen without warning until v1.0.


npm i react-router-confirm-navigation -S


yarn add react-router-confirm-navigation



Can be placed anywhere inside a component that is used for a <Route />. Uses react router's higher order component withRouter to pass router props.

import React from 'react';
import ConfirmNavigation from 'react-router-confirm-navigation';
import YourCustomConfirmation from './YourCustomConfirmation';

export default () => {
  return (
      <ConfirmNavigation allowBackButton>
          onConfirmNavigation={(currentLocation) => {
            console.log('navigation allowed to ', currentLocation.pathname);
          onCancelNavigation={(nextLocation) => {
            console.log('navigation cancelled to ', nextLocation.pathname);
          allowNavigation={(nextLocation) => {
            // condition for allowing or blocking a navigation
            return false;

Call this.props.confirmNavigation and this.props.cancelNavigation anywhere you like from inside the component.

class YourCustomConfirmation extends React.Component {
  // optionally, you can use class methods or pass in as props as shown above
  // allowNavigation (nextLocation) { return false; }
  // onConfirmNavigation (currentLocation) {}
  // onCancelNavigation (nextLocation) {}
  render () {
    return (
        <p>Are you sure you wish to leave?</p>
        <button onClick={this.props.confirmNavigation}>Yep</button>
        <button onClick={this.props.cancelNavigation}>Nope</button>


  1. Test usage with react router v4.x.x
  2. Add more tests for improper component usage