用wrappers和useMatch 对 路由重定向

UmiJS路由相关的官网地址:

https://umijs.org/docs/guides/routes#match-%E4%BF%A1%E6%81%AF

我主要是用了useMatch和wrappers

具体代码参考:
一、wrappers定义的paramsRedirect.ts文件代码

  // 第一步:在 wrappers 中创建重定向逻辑
import { useMatch, useNavigate } from 'umi';
import React from 'react';

export default (props: any) => {
  const navigate = useNavigate(); // 正确获取导航方法
  const match = useMatch('/navAll/detail/:id');
  // 使用 useEffect 避免渲染阶段直接触发导航
  React.useEffect(() => {
    if (match?.params.projectId) {
      navigate(`/navAll/detail?id=${match.params.id}`, {
        replace: true,
      });
    }
  }, [match?.params.id]);

  return match?.params.id? null : props.children;
};

二、 在路由表中引入warppers

export const navRouter = [
  {
    path: '/navAll',
    component: '../pages/...',
    routes: [
      {
        path: '/navAll',
        redirect: '/navAll/index',
      },

      ......

      {
        title: '项目详情',
        path: '/navAll/detail',
        component: '../pages/...',
      },
      // 新增捕获路径参数的路由(仅用于重定向)
      {
        path: '/navAll/detail/:id',
        wrappers: ['./wrappers/paramsRedirect'],
        component: '../pages/...',
      },

      ...... 

    ],
  },
] as const;
posted @ 2025-04-02 17:17  码磊姐姐  阅读(101)  评论(0)    收藏  举报