如何修复React Router v5中路由从/pageName到/my/pageName的跳转问题

问题根源 #

1. 旧路径/pageName未配置对应路由规则，导致Switch匹配到带:userId的路由时，因参数缺失生成/pageName/undefined的错误路径
2. 在错误路径下使用相对路径的<Link>，会基于当前URL拼接出/pageName/pageName2这类无效路由

解决方案 #

1. 新增旧路径重定向路由

在路由数组最前端添加旧路径到新路径的重定向规则，确保Switch优先匹配旧路径并完成跳转：

export const routes: RouteItem[] = [
    // 新增旧路径重定向
    {
        config: {
            component: () => <Redirect to="/my/pageName1" />,
            exact: true,
            path: '/pageName1',
        },
    },
    {
        config: {
            component: () => <Redirect to="/my/pageName2" />,
            exact: true,
            path: '/pageName2',
        },
    },
    // 原有路由保持不变
    {
        config: {
            component: RedirectUser,
            exact: true,
            path: '/',
        },
        labelKey: '',
    },
    {
        config: {
            component: pageName1,
            exact: true,
            path: '/:userId/pageName1',
        },
        labelKey: 'pageName1',
        navSection: 'top',
        perm: 'READ',
    },
    {
        config: {
            component: pageName2,
            exact: true,
            path: '/:userId/pageName2',
        },
        labelKey: 'pageName2',
        navSection: 'top',
        perm: 'READ'
    },
    {
        config: {
            component: pageName2,
            exact: true,
            path: '/:userId/pageName2/:item',
        },
        labelKey: 'pageName2',
        perm: 'READ'
    },
]

如果页面数量较多，可使用通用重定向组件减少重复代码：

{
    config: {
        component: ({ location }) => {
            // 匹配旧路径并替换为/my开头的新路径
            const newPath = location.pathname.replace(/^\/(pageName1|pageName2)/, '/my/$1');
            return <Redirect to={newPath} />;
        },
        exact: false,
        path: ['/pageName1', '/pageName2'],
    },
},

2. 强制导航链接使用绝对路径

所有<Link>组件必须使用绝对路径，避免相对路径基于错误URL拼接：

错误写法：

<Link to="pageName2">PageName2</Link>

正确写法：

<Link to="/my/pageName2">PageName2</Link>

若需动态使用当前userId，可通过useParams()获取参数后拼接：

import { useParams } from 'react-router-dom';

const MyComponent = () => {
    const { userId } = useParams<{ userId: string }>();
    return <Link to={`/${userId}/pageName2`}>PageName2</Link>;
};

3. 添加兜底路由（可选）

为防止用户访问其他无效路径，可在路由数组最后添加兜底重定向：

{
    config: {
        component: () => <Redirect to="/my/pageName1" />,
        exact: false,
        path: '*',
    },
},

核心逻辑说明 #

• Switch组件从上到下匹配第一个符合规则的路由，因此重定向路由必须放在原有路由之前
• 绝对路径的<Link>会直接替换当前URL的路径部分，避免基于错误路径的相对拼接
• 通用重定向通过正则匹配批量处理旧路径，减少重复配置

内容的提问来源于stack exchange，提问作者mmk