RouteLeavingGuard Usage for Medium article ca839f5faf39

RouteLeavingGuard-class-usage-ca839f5faf39.jsx

import React from ‘react’
import RouteLeavingGuard from 'components/RouteLeavingGuard'

export class LoginScene extends React.Component {
  state = {
    username: '',
    password: '', 
    isDirty: false,
  }

  // ...Other scene helper functions

  render() {
    const { isDirty } = this.state
    const { history } = this.props
    return (
      <React.Fragment>
        // ...Other scene components
        
        <RouteLeavingGuard
            // When should shouldBlockNavigation be invoked, 
            // simply passing a boolean 
            // (same as "when" prop of Prompt of React-Router)
           when={isDirty}
            // Navigate function
           navigate={path => history.push(path)}
            // Use as "message" prop of Prompt of React-Router
           shouldBlockNavigation={location => {
              // This case it blocks the navigation when: 
              // 1. the login form is dirty, and 
              // 2. the user is going to 'sign-up' scene.
              //    (Just an example, in real case you might 
              //     need to block all location regarding this case)
              if (isDirty) {
                if (location.pathname === 'signup') {
                  return true
                }
              } 
              return false
           }}
        /> 
      </React.Fragment>    
    )
  }
}
export default LoginScene