实现路由重定向需用 redirect 配置（如 { path: '/', redirect: '/login' }），确保目标路径存在且以 / 开头；避免循环跳转；带参跳转用函数式写法；React Router v6 改用 <Navigate replace>。

实现路由重定向，核心是让访问某个路径时自动跳转到另一个路径，而不是手动写跳转逻辑。默认首页跳转（比如访问 / 时显示登录页）是最常见也最容易出错的场景——看似简单，但配置不当会导致白屏、循环跳转或参数丢失。

直接用 redirect 配置根路径跳转

不要给根路径配组件，而是用 redirect 指向目标页：

• { path: '/', redirect: '/login' } —— 这样访问 / 会立即跳到 /login，地址栏变更为 /login，且不会渲染空布局
• 目标路径必须已定义：确保 /login 在 routes 数组中存在对应路由，否则跳转后报 404
• 路径必须以 / 开头：写成 login 或 ./login 都会失败

避免循环跳转的硬性规则

两个互相 redirect 的路径会触发浏览器无限重定向，页面卡死或报错：

• 禁止出现 { path: '/', redirect: '/home' } 和 { path: '/home', redirect: '/' } 同时存在
• 检查所有带 redirect 的路由，确认没有形成 A→B→C→A 这类闭环
• 部署前用 php think route:list（ThinkPHP）或 router.getRoutes()（Vue Router）导出路由表人工核对

带参数的默认跳转要走函数式重定向

如果首页跳转需要携带来源标记（如 /?from=landing），静态 redirect 不支持拼接 query：

• 改用函数写法：redirect: to => ({ path: '/login', query: { from: 'landing' } })
• 这样既能保留原始请求中的 query，也能注入新参数，避免手动解析 URL
• 适用于从推广链接、扫码落地页等场景跳转登录页时传递上下文

React Router v6 的特殊处理方式

v6 不再支持 Route 上的 redirect 属性，改用 <Navigate> 组件实现默认跳转：

• 在根 Route 下添加 index 子路由：<Route index element={<Navigate to="/login" replace />} />
• replace: true 很关键——防止用户点返回键回到空白的 /
• 绝对不要在 loader 里调 redirect()，否则会触发加载→跳转→再加载的死循环