React Router v6 子路由调用navigate跳转到根绝对路径问题说明

React Router v6 子路由跳转全局根路径说明 #

标准正确写法

你使用的navigate("/")本身就是React Router v6跳转全局绝对根路径的原生标准实现，子路由场景下不存在以斜杠开头的路径相对父路由根路径的规则，原生逻辑下该写法一定会直接跳转到/，你遇到的跳转到/login的异常是其他业务代码干扰导致的。

异常排查方向

你可以从以下几个角度排查干扰逻辑：

• 全局路由拦截逻辑：检查是否存在全局路由守卫/权限校验逻辑，当跳转至根路径/时，因判定未登录等原因被强制重定向到/login
• 父路由组件内部逻辑：检查/login路由对应的<Auth/>组件是否有默认重定向、路由匹配兜底逻辑，在跳转异常时触发了到/login的重定向
• 回调组件额外副作用：检查<AuthCallback/>组件内是否存在其他useEffect、异步逻辑、定时器在navigate("/")执行后触发了二次跳转
• 路径拼写错误：确认navigate的参数是纯字符串"/"，不存在多余空格、特殊字符等拼写问题

验证方法

你可以通过打日志快速定位问题：

1. 在navigate("/")执行前打印日志，确认跳转逻辑触发
2. 在全局根路径对应的<Master/>组件的useEffect挂载钩子中打印日志，确认是否先触发了根路径的组件加载，之后才被重定向到/login

// 路由配置参考
<Routes>
    <Route path="/" element={<Master/>}/>
    <Route path="/login" element={<Auth/>}>
        <Route path="" element={<AuthInitiate/>}/>
        <Route path="callback" element={<AuthCallback/>}/>
    </Route>
</Routes>

// 全局根路径跳转正确写法
const navigate = useNavigate()
navigate("/")

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