• 跳转前确认

    跳转前确认

    React Router 提供一个 routerWillLeave 生命周期钩子,这使得 React 组件可以拦截正在发生的跳转,或在离开 route 前提示用户。routerWillLeave 返回值有以下两种:

    1. return false 取消此次跳转
    2. return 返回提示信息,在离开 route 前提示用户进行确认。

    你可以在 route 组件 中引入 Lifecycle mixin 来安装这个钩子。

    1. import { Lifecycle } from 'react-router'
    2. const Home = React.createClass({
    3. // 假设 Home 是一个 route 组件,它可能会使用
    4. // Lifecycle mixin 去获得一个 routerWillLeave 方法。
    5. mixins: [ Lifecycle ],
    6. routerWillLeave(nextLocation) {
    7. if (!this.state.isSaved)
    8. return 'Your work is not saved! Are you sure you want to leave?'
    9. },
    10. // ...
    11. })

    如果你在组件中使用了 ES6 类,你可以借助 react-mixin 包将 Lifecycle mixin 添加到组件中,不过我们推荐使用 React.createClass 来创建组件,初始化路由的生命周期钩子函数。

    如果你想在一个深层嵌套的组件中使用 routerWillLeave 钩子,只需在 route 组件 中引入 RouteContext mixin,这样就会把 route 放到 context 中。

    1. import { Lifecycle, RouteContext } from 'react-router'
    2. const Home = React.createClass({
    3. // route 会被放到 Home 和它子组件及孙子组件的 context 中,
    4. // 这样在层级树中 Home 及其所有子组件都可以拿到 route。
    5. mixins: [ RouteContext ],
    6. render() {
    7. return <NestedForm />
    8. }
    9. })
    10. const NestedForm = React.createClass({
    11. // 后代组件使用 Lifecycle mixin 获得
    12. // 一个 routerWillLeave 的方法。
    13. mixins: [ Lifecycle ],
    14. routerWillLeave(nextLocation) {
    15. if (!this.state.isSaved)
    16. return 'Your work is not saved! Are you sure you want to leave?'
    17. },
    18. // ...
    19. })