使用React-Router检测用户离开页面

我希望我的ReactJS应用在离开特定页面时通知用户。特别是一条弹出消息，提醒他/她进行以下操作：

“更改已保存，但尚未发布。现在执行吗？”

我应该在react-router全局范围内触发此操作，还是可以在react页面/组件内完成此操作？

我还没有发现任何关于后者的信息，我宁愿避免使用第一个。除非当然是其规范，否则这使我想知道如何执行这样的事情而不必将代码添加到用户可以访问的所有其他可能的页面中。

欢迎有任何见解，谢谢！

react-routerv4引入了一种使用阻止导航的新方法Prompt。只需将其添加到您要阻止的组件中即可：

import { Prompt } from 'react-router'

const MyComponent = () => (
  <React.Fragment>
    <Prompt
      when={shouldBlockNavigation}
      message='You have unsaved changes, are you sure you want to leave?'
    />
    {/* Component JSX */}
  </React.Fragment>
)

这将阻止所有路由，但不会阻止页面刷新或关闭。要阻止它，您需要添加以下内容（根据需要使用相应的React生命周期进行更新）：

componentDidUpdate = () => {
  if (shouldBlockNavigation) {
    window.onbeforeunload = () => true
  } else {
    window.onbeforeunload = undefined
  }
}

onbeforeunload具有浏览器的各种支持。

在React-Router v2.4.0或更高版本中以及之前v4有几种选择

1. 附加功能onLeave的Route

 <Route
      path="/home"
      onEnter={ auth }
      onLeave={ showConfirm }
      component={ Home }
    >

2. 使用功能setRouteLeaveHook的componentDidMount

您可以防止发生过渡，也可以在离开带有离开钩子的路线之前提示用户。

const Home = withRouter(
  React.createClass({

    componentDidMount() {
      this.props.router.setRouteLeaveHook(this.props.route, this.routerWillLeave)
    },

    routerWillLeave(nextLocation) {
      // return false to prevent a transition w/o prompting the user,
      // or return a string to allow the user to decide:
      // return `null` or nothing to let other hooks to be executed
      //
      // NOTE: if you return true, other hooks will not be executed!
      if (!this.state.isSaved)
        return 'Your work is not saved! Are you sure you want to leave?'
    },

    // ...

  })
)

请注意，这个例子使用了的withRouter在推出高阶组件v2.4.0.

但是，当手动更改URL中的路由时，这些解决方案并不十分理想

在某种意义上说

• 我们看到确认-好的
• 页面包含不重新加载-确定
• 网址没有变化-不好

对于react-router v4使用提示或自定义历史记录：

但是，在from'react-router react-router v4的帮助下，它更容易实现Prompt

根据文档

提示

用于在离开页面之前提示用户。当您的应用程序进入应防止用户离开的状态时（例如，表单已被一半填写），请呈现<Prompt>。

import { Prompt } from 'react-router'

<Prompt
  when={formIsHalfFilledOut}
  message="Are you sure you want to leave?"
/>

讯息：字串

当用户尝试离开时提示用户的消息。

<Prompt message="Are you sure you want to leave?"/>

讯息：功能

将会与用户尝试导航到的下一个位置和操作一起调用。返回一个字符串以向用户显示提示，或者返回true以允许过渡。

<Prompt message={location => (
  `Are you sure you want to go to ${location.pathname}?`
)}/>

时间：布尔

<Prompt>您可以始终渲染它，而可以通过when={true}或when={false}阻止或相应地导航，而不是有条件地渲染后卫。

在渲染方法中，您只需要根据需要添加文档中提到的内容即可。

更新：

如果您希望在离开页面时要执行自定义操作，则可以使用自定义历史记录并配置路由器，例如

history.js

import createBrowserHistory from 'history/createBrowserHistory'
export const history = createBrowserHistory()

... 
import { history } from 'path/to/history';
<Router history={history}>
  <App/>
</Router>

然后在您的组件中可以使用history.blocklike

import { history } from 'path/to/history';
class MyComponent extends React.Component {
   componentDidMount() {
      this.unblock = history.block(targetLocation => {
           // take your action here     
           return false;
      });
   }
   componentWillUnmount() {
      this.unblock();
   }
   render() {
      //component render here
   }
}

对于react-router2.4.0+

注意：建议将所有代码迁移到最新版本，react-router以获取所有新功能。

按照react-router文档中的建议：

一个应该使用withRouter更高阶的组件：

我们认为，这种新的HoC更好，更轻松，并且将在文档和示例中使用它，但这并不是转换的硬性要求。

作为文档中的ES6示例：

import React from 'react'
import { withRouter } from 'react-router'

const Page = React.createClass({

  componentDidMount() {
    this.props.router.setRouteLeaveHook(this.props.route, () => {
      if (this.state.unsaved)
        return 'You have unsaved information, are you sure you want to leave this page?'
    })
  }

  render() {
    return <div>Stuff</div>
  }

})

export default withRouter(Page)

对于react-routerv3.x

我遇到了同样的问题，该页面上任何未保存的更改都需要确认消息。就我而言，我使用的是React Router v3，因此无法使用<Prompt />，它是从React Router v4引入的。

我处理“后退按钮点击”和“意外的链接点击”用的组合setRouteLeaveHook和history.pushState()，并办理“刷新按钮”与onbeforeunload事件处理程序。

setRouteLeaveHook（doc）和history.pushState（doc）

• 仅使用setRouteLeaveHook是不够的。由于某些原因，尽管单击“后退按钮”时页面保持不变，但URL更改了。

    // setRouteLeaveHook returns the unregister method
    this.unregisterRouteHook = this.props.router.setRouteLeaveHook(
      this.props.route,
      this.routerWillLeave
    );
  
    ...
  
    routerWillLeave = nextLocation => {
      // Using native 'confirm' method to show confirmation message
      const result = confirm('Unsaved work will be lost');
      if (result) {
        // navigation confirmed
        return true;
      } else {
        // navigation canceled, pushing the previous path
        window.history.pushState(null, null, this.props.route.path);
        return false;
      }
    };

onbeforeunload（doc）

• 用于处理“意外重新加载”按钮

  window.onbeforeunload = this.handleOnBeforeUnload;
  
  ...
  
  handleOnBeforeUnload = e => {
    const message = 'Are you sure?';
    e.returnValue = message;
    return message;
  }

以下是我编写的完整组件

• 请注意，withRouter曾经有过this.props.router。
• 请注意，它this.props.route是从调用组件传递过来的

• 请注意，currentState它作为prop传递而具有初始状态并检查任何更改

  import React from 'react';
  import PropTypes from 'prop-types';
  import _ from 'lodash';
  import { withRouter } from 'react-router';
  import Component from '../Component';
  import styles from './PreventRouteChange.css';
  
  class PreventRouteChange extends Component {
    constructor(props) {
      super(props);
      this.state = {
        // initialize the initial state to check any change
        initialState: _.cloneDeep(props.currentState),
        hookMounted: false
      };
    }
  
    componentDidUpdate() {
  
     // I used the library called 'lodash'
     // but you can use your own way to check any unsaved changed
      const unsaved = !_.isEqual(
        this.state.initialState,
        this.props.currentState
      );
  
      if (!unsaved && this.state.hookMounted) {
        // unregister hooks
        this.setState({ hookMounted: false });
        this.unregisterRouteHook();
        window.onbeforeunload = null;
      } else if (unsaved && !this.state.hookMounted) {
        // register hooks
        this.setState({ hookMounted: true });
        this.unregisterRouteHook = this.props.router.setRouteLeaveHook(
          this.props.route,
          this.routerWillLeave
        );
        window.onbeforeunload = this.handleOnBeforeUnload;
      }
    }
  
    componentWillUnmount() {
      // unregister onbeforeunload event handler
      window.onbeforeunload = null;
    }
  
    handleOnBeforeUnload = e => {
      const message = 'Are you sure?';
      e.returnValue = message;
      return message;
    };
  
    routerWillLeave = nextLocation => {
      const result = confirm('Unsaved work will be lost');
      if (result) {
        return true;
      } else {
        window.history.pushState(null, null, this.props.route.path);
        if (this.formStartEle) {
          this.moveTo.move(this.formStartEle);
        }
        return false;
      }
    };
  
    render() {
      return (
        <div>
          {this.props.children}
        </div>
      );
    }
  }
  
  PreventRouteChange.propTypes = propTypes;
  
  export default withRouter(PreventRouteChange);

请让我知道是否有任何问题:)

对于react-routerv0.13.x和reactv0.13.x：

使用willTransitionTo()和willTransitionFrom()静态方法可以做到这一点。对于较新的版本，请参见下面的其他答案。

从react-router文档中：

您可以在路由处理程序上定义一些静态方法，这些方法在路由转换期间将被调用。

willTransitionTo(transition, params, query, callback)

在处理程序将要渲染时调用，使您有机会中止或重定向过渡。您可以在执行一些异步工作时暂停过渡，并在完成后调用callback（error），或者在参数列表中省略该回调，它将为您调用。

willTransitionFrom(transition, component, callback)

在过渡出有效路线时调用，使您有机会中止过渡。该组件是当前组件，您可能需要使用它来检查其状态，以决定是否要允许转换（例如表单字段）。

例

  var Settings = React.createClass({
    statics: {
      willTransitionTo: function (transition, params, query, callback) {
        auth.isLoggedIn((isLoggedIn) => {
          transition.abort();
          callback();
        });
      },

      willTransitionFrom: function (transition, component) {
        if (component.formHasUnsavedData()) {
          if (!confirm('You have unsaved information,'+
                       'are you sure you want to leave this page?')) {
            transition.abort();
          }
        }
      }
    }

    //...
  });

对于v0.14.x或更高版本的react-router1.0.0-rc1 react：

使用routerWillLeave生命周期钩子应该可以做到这一点。对于较旧的版本，请参见上面的答案。

从react-router文档中：

要安装此挂钩，请在一个路由组件中使用Lifecycle mixin。

  import { Lifecycle } from 'react-router'

  const Home = React.createClass({

    // Assuming Home is a route component, it may use the
    // Lifecycle mixin to get a routerWillLeave method.
    mixins: [ Lifecycle ],

    routerWillLeave(nextLocation) {
      if (!this.state.isSaved)
        return 'Your work is not saved! Are you sure you want to leave?'
    },

    // ...

  })

东西。可能会在最终版本之前更改。

您可以使用此提示。

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link, Prompt } from "react-router-dom";

function PreventingTransitionsExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Form</Link>
          </li>
          <li>
            <Link to="/one">One</Link>
          </li>
          <li>
            <Link to="/two">Two</Link>
          </li>
        </ul>
        <Route path="/" exact component={Form} />
        <Route path="/one" render={() => <h3>One</h3>} />
        <Route path="/two" render={() => <h3>Two</h3>} />
      </div>
    </Router>
  );
}

class Form extends Component {
  state = { isBlocking: false };

  render() {
    let { isBlocking } = this.state;

    return (
      <form
        onSubmit={event => {
          event.preventDefault();
          event.target.reset();
          this.setState({
            isBlocking: false
          });
        }}
      >
        <Prompt
          when={isBlocking}
          message={location =>
            `Are you sure you want to go to ${location.pathname}`
          }
        />

        <p>
          Blocking?{" "}
          {isBlocking ? "Yes, click a link or the back button" : "Nope"}
        </p>

        <p>
          <input
            size="50"
            placeholder="type something to block transitions"
            onChange={event => {
              this.setState({
                isBlocking: event.target.value.length > 0
              });
            }}
          />
        </p>

        <p>
          <button>Submit to stop blocking</button>
        </p>
      </form>
    );
  }
}

export default PreventingTransitionsExample;

使用history.listen

例如下面的例子：

在您的组件中，

componentWillMount() {
    this.props.history.listen(() => {
      // Detecting, user has changed URL
      console.info(this.props.history.location.pathname);
    });
}