taro3.x-4.x路由拦截如何破？

最新推荐文章于 2025-12-04 22:56:41 发布

原创

最新推荐文章于 2025-12-04 22:56:41 发布 · 715 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #taro

前言

大家要是使用过京东的taro框架，都知道taro1.x是支持生命周期BeforeRouteLeave的，这个生命周期主要是用来监听用户返回页面或前进操作，用于弹出弹窗挽留用户等，那么假如你升级到了taro3或taro4，官方是不支持这个生命周期的，需要自己实现，本文主要就是介绍如何添加实现这个功能

hook接口设计

接口名称

useBeforeRouteLeave(fn)

自定义 React 钩子，用于在 Taro 应用中拦截路由跳转，并在跳转前执行自定义逻辑（例如提示用户挽留）

使用场景

在用户尝试离开当前页面时，提示挽留等。
在特定条件下阻止路由跳转。

入参说明

参数	类型	是否必须	描述
fn	Fuction	是	拦截逻辑回调函数，接收一个对象参数{ from, to, next }。

fn回调参数说明

参数	类型	描述
from	String	当前路由路径
to	String	目标路由路径
next	String	控制是否允许跳转的函数。flag=true允许跳转，flag=false阻止跳转。

返回值

无返回值

示例代码

import useBeforeRouteLeave from './hooks/useBeforeRouteLeave';

function MyComponent() {
   
   
  useBeforeRouteLeave(({
    
     from, to, next }) => {
   
   
    Taro.showModal({
   
   
      title: '是否离开？',
      confirmText: "确定"
    }).then(res=>{
   
   
      if (res.confirm) {
   
   
        next(true)
      } else {
   
   
        next(false)
      }
    })
  });

  return <div>My Component</div>;
}

代码逻辑设计

代码实现设计

import {
   
    useEffect } from 'react'
import {
   
    useDidShow } from '@tarojs/taro'
import {
   
    history } from '@tarojs/router'
export default function useBeforeRouteLeave(fn) {
   
   
  let isunBlocked =