使用react-router-dom 6实现React登录表单跳转并传递邮箱参数到仪表盘

问题根因 #

你无法获取邮箱参数主要是两个核心错误：

1. 多级路由跳转时没有透传参数，导致参数在中间路由丢失
2. 取值API使用错误，路由state携带的参数不能通过route.params获取

解决方案 #

方案1：路由state透传（适合临时传参）

如果你使用的是React Router v6版本，按照以下步骤修改：

1. 登录页Formik提交时正确传参
   调用useNavigate跳转时，把邮箱放在第二个参数的state字段中：

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

// 组件内部逻辑
const navigate = useNavigate();
const onSubmit = (values) => {
  // 你的登录校验、接口请求逻辑
  navigate('/dashboard', {
    state: {
      email: values.email
    }
  })
}

2. /dashboard中间页透传参数
   如果/dashboard会自动重定向到/dashboard/app，需要把接收的state一同传递，否则参数会丢失：

import { useNavigate, useLocation } from 'react-router-dom';

// /dashboard组件内部
const navigate = useNavigate();
const location = useLocation();

useEffect(() => {
  // 重定向时透传state
  navigate('/dashboard/app', { state: location.state })
}, [navigate, location])

3. /dashboard/app页正确取值
   使用useLocation获取state中的参数，不要用route.params：

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

// /dashboard/app组件内部
const location = useLocation();
const email = location.state?.email; // 可选链避免state为空时报错
console.log(email);

方案2：本地存储（更稳定，刷新不丢失）

不需要处理路由透传，登录成功直接把邮箱存入localStorage，全应用可访问：

// 登录页提交时存储
localStorage.setItem('userEmail', values.email);

// 任意页面取值
const email = localStorage.getItem('userEmail');

方案3：全局状态管理（适合用户信息全应用共享）

如果项目接入了Zustand/Redux等状态管理工具，登录成功后把邮箱写入全局状态，所有组件都可以直接读取，不需要路由传参。

代码截图 #

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