用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;
点个赞吧

浙公网安备 33010602011771号