React PIN登录提交报404错误 路由跳转逻辑异常排查

登录触发404的核心bug在useEffect的路由跳转逻辑：
代码已经通过location.search解析出登录后需要跳转的目标路径，存到了redirect变量中（无重定向参数时默认跳转到根路径/），但实际登录成功后的跳转逻辑硬编码写死了navigate('/redirect')，会直接跳转到项目中不存在的/redirect路由。如果项目使用BrowserRouter路由模式，不存在的路由会被服务器当作静态资源请求，最终返回404错误，和你遇到的报错完全匹配。

1. 修正useEffect中的跳转参数，将硬编码的路径字符串替换为提前解析好的redirect变量，修改后的钩子代码如下：

useEffect(() => {
    if (userInfo) {
        // 修复前错误写法：navigate('/redirect')
        navigate(redirect)
    }
}, [navigate, userInfo, redirect])

2. 额外校验项：
   • 检查项目路由表配置，确认redirect变量可能指向的所有路径（比如首页、个人中心、之前访问的受限页面）都已正确注册
   • 如果生产环境部署后仍偶现路由404，给Web服务器（Nginx、Apache等）配置路由兜底规则，将所有非静态资源请求统一重定向到项目入口index.html，避免前端路由被服务器误判为不存在的资源路径。

修改完成后重启服务，输入正确账号密码点击Sign In按钮：

• 登录接口校验通过、拿到userInfo后会自动跳转到目标路径，不会再发起/redirect路径的无效请求
• 从受限页跳转到登录页的场景下，登录成功后会正确返回原访问页面，跳转逻辑符合预期

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