{"id":7362,"date":"2017-10-23T17:52:36","date_gmt":"2017-10-23T17:52:36","guid":{"rendered":"https:\/\/developers.messagemedia.com\/?p=153"},"modified":"2017-10-23T17:52:36","modified_gmt":"2017-10-23T17:52:36","slug":"blocking-page-navigation-in-a-reactjs-application","status":"publish","type":"blog","link":"https:\/\/messagemedia.com\/au\/blog\/blocking-page-navigation-in-a-reactjs-application\/","title":{"rendered":"Blocking page navigation in a ReactJS Application (React Router)"},"content":{"rendered":"

Our product owner came to us with an interesting problem the other day, in the latest release of the MessageMedia Frontend we have a new payment portal for customers to pay invoices, when a user is in the process of paying a bill we need to block navigation, or in his words:<\/span><\/span><\/p>\n

As a billing contact <\/span>I want to confirm my intent to leave the payment portal when my payment is still processing s<\/span>o that I am aware that my payment hasn’t finished processing <\/span><\/p><\/blockquote>\n

Blocking page navigation with React Router<\/h2>\n

There seems to be quite a few<\/a><\/span> methods of achieving this but most are pre v4\u2026<\/span><\/p>\n

Let\u2019s go to the docs<\/h3>\n

React Router have a great online documentation<\/a><\/span> portal available, upon a quick search we find the <Prompt \/><\/code> method.<\/span><\/p>\n

Prompt the user before navigating away from a page. <\/span><\/p><\/blockquote>\n

Great! Let\u2019s create a simple component to test.<\/span><\/p>\n

Simple NavigationBlocker Component<\/h3>\n
import React from 'react'<\/span>\nimport PropTypes from 'prop-types'<\/span>\nimport { Prompt } from 'react-router-dom'<\/span>\n\u200b<\/span>\nconst NavigationBlocker = (props) => (<\/span>\n  <Prompt<\/span>\n \u00a0  when={props.navigationBlocked}<\/span>\n \u00a0  message=\"Are you sure you want to leave?\"<\/span>\n  \/><\/span>\n)<\/span>\n\u200b<\/span>\nNavigationBlocker.propTypes = {<\/span>\n  navigationBlocked: PropTypes.bool.isRequired,<\/span>\n}<\/span>\n\u200b<\/span>\nexport default NavigationBlocker<\/span><\/pre>\n
\/ Note: I\u2019m specifically using react-router-dom<\/code> but you can use plain ol\u2019 react-router<\/code> for this \/<\/span><\/p>\n
\n
\n<\/div>\n
Users should now see a prompt when clicking on links between routes but what about browser actions eg. Back \/ Forward buttons, Reload or Close?<\/span><\/p>\n
Blocking browser navigation with onbeforeunload<\/code><\/h2>\n
Once again you\u2019re going to find many articles \/ stack overflow questions \/ tweets on how to implement this so I\u2019d suggest –\u00a0<\/span><\/p>\n
Go back to the docs<\/h3>\n
As per the MDN Documentation<\/a><\/span>:<\/span><\/p>\n
The WindowEventHandlers.onbeforeunload<\/code> event handler property contains the code executed when the beforeunload<\/code> is sent. <\/span><\/p><\/blockquote>\n
The problem is there\u2019s many ways to implement this but as of 2017 most browsers block custom messages (for security reasons), as we don\u2019t need to worry about this we can use something as simple as:<\/span><\/p>\n
\/\/ Enable navigation prompt<\/span>\nwindow.onbeforeunload = () => true<\/span>\n\/\/ Remove navigation prompt<\/span>\nwindow.onbeforeunload = null<\/span><\/pre>\n
Let\u2019s add it to our existing component<\/h3>\n
import React from 'react'<\/span>\nimport PropTypes from 'prop-types'<\/span>\nimport { Prompt } from 'react-router-dom'<\/span>\n\u200b<\/span>\nconst NavigationBlocker = (props) => {<\/span>\n  if (props.navigationBlocked) {<\/span>\n \u00a0  window.onbeforeunload = () => true<\/span>\n  } else {<\/span>\n \u00a0  window.onbeforeunload = null<\/span>\n  }<\/span>\n  return (<\/span>\n \u00a0  <Prompt<\/span>\n \u00a0 \u00a0  when={props.navigationBlocked}<\/span>\n \u00a0 \u00a0  message=\"Are you sure you want to leave?\"<\/span>\n \u00a0  \/><\/span>\n  )<\/span>\n}<\/span>\n\u200b<\/span>\nNavigationBlocker.propTypes = {<\/span>\n  navigationBlocked: PropTypes.bool.isRequired,<\/span>\n}<\/span>\n\u200b<\/span>\nexport default NavigationBlocker<\/span><\/pre>\n
And just like that we have a navigation blocking component that we can easily turn on and off.<\/span><\/p>\n
Extending it with Redux<\/h2>\n
I would suggest extending it to be a Global Navigation Blocker from here, when a processing redux action is sent send another to block navigation, when it resolves send another to resolve.<\/span><\/p>\n
This allows you to include the blocker once at app level rather than including every time you need it.<\/span><\/p>\n
This is what my implementation ended up looking like:<\/span><\/p>\n
import React from 'react'<\/span>\nimport PropTypes from 'prop-types'<\/span>\nimport { connect } from 'react-redux'<\/span>\nimport { Prompt } from 'react-router-dom'<\/span>\n\u200b<\/span>\nimport { getNavigationBlocked } from '..\/navigation-selectors'<\/span>\n\u200b<\/span>\nconst GlobalNavigationBlocker = (props) => {<\/span>\n  if (props.navigationBlocked) {<\/span>\n \u00a0  window.onbeforeunload = () => true<\/span>\n  } else {<\/span>\n \u00a0  window.onbeforeunload = null<\/span>\n  }<\/span>\n  return (<\/span>\n \u00a0  <Prompt<\/span>\n \u00a0 \u00a0  when={props.navigationBlocked}<\/span>\n \u00a0 \u00a0  message=\"Are you sure you want to leave?\"<\/span>\n \u00a0  \/><\/span>\n  )<\/span>\n}<\/span>\n\u200b<\/span>\nGlobalNavigationBlocker.propTypes = {<\/span>\n  navigationBlocked: PropTypes.bool.isRequired,<\/span>\n}<\/span>\n\u200b<\/span>\nexport const mapStateToProps = state => ({<\/span>\n  navigationBlocked: getNavigationBlocked(state),<\/span>\n})<\/span>\n\u200b<\/span>\nexport default connect(mapStateToProps)(GlobalNavigationBlocker)<\/span><\/pre>\n
Drawbacks<\/h2>\n
Unfortunately because of how onbeforeunload<\/code> can be misused, modern browsers have implemented some safeguards, as described in the docs:<\/span><\/p>\n
To combat unwanted pop-ups, some browsers don’t display prompts created in beforeunload<\/code> event handlers unless the page has been interacted with; some don’t display them at all. <\/span><\/p><\/blockquote>\n
And<\/span><\/p>\n
Various browsers ignore the result of the event and do not ask the user for confirmation at all \u2026 Firefox has a switch named dom.disable_beforeunload<\/code> in about:config to enable this behaviour. (For eg.) <\/span><\/p><\/blockquote>\n
Or, TL;DR:<\/span><\/p>\n