路由重定向怎么实现？redirect使用避坑指南

路由重定向看似简单，实则暗藏诸多陷阱：从根路径跳转白屏、循环重定向导致页面卡死，到带参跳转时 query 丢失、React Router v6 中配置方式彻底变更——本文直击 redirect 实践中的高频踩坑点，手把手教你用正确的配置方式（如严格以 / 开头的路径、函数式动态传参、v6 的 index + Navigate 组合）安全实现默认页跳转、来源标记透传和闭环路由校验，助你避开线上故障雷区。

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

直接用 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 属性，改用 组件实现默认跳转：

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

今天关于《路由重定向怎么实现？redirect使用避坑指南》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！