React Router中通过Link传递Props失败，求正确接收方法

问题分析 #

你的SignUp组件中通过Link的state属性传递参数的方式是正确的，但Birthday组件的接收方式有误：

1. 直接使用location.state会报错，因为location对象未被正确引入或获取
2. 组件参数中解构的email等属性并非通过常规props传递，而是存储在路由的state对象中

正确的参数接收方式 #

根据你使用的react-router-dom版本，提供两种解决方案：

方案一：react-router-dom v6+（推荐）

使用useLocation钩子获取路由状态：

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

function Birthday() {
  // 获取路由location对象
  const location = useLocation();
  // 从state中解构参数，添加默认空对象避免state为空时报错
  const { email, name, userName, passWord } = location.state || {};

  // 打印验证参数
  console.log('接收的邮箱:', email);
  console.log('所有传递的参数:', location.state);

  return (
    <>
      Hi, 你的邮箱是 {email}
    </>
  )
}

export default Birthday;

方案二：react-router-dom v5

v5中路由组件会自动接收location作为props，可直接解构使用：

import React from 'react'

// 从props中解构location
function Birthday({ location }) {
  const { email, name, userName, passWord } = location.state || {};

  console.log('接收的邮箱:', email);

  return (
    <>
      Hi, 你的邮箱是 {email}
    </>
  )
}

export default Birthday;

可选优化：传递全部参数 #

如果需要传递所有表单值，可简化SignUp中Link的state写法：

<Link 
  to={{
    pathname:'/birthday', 
    state: { email, name, userName, passWord } // 利用对象简写语法
  }} 
  style={{textDecoration : 'none' ,color: 'inherit'}}
>
  <div>
    <SignUpLoginButton email={email} name={name} userName={userName} passWord={passWord}/>
  </div>
</Link>

注意事项 #

• 路由state存储在内存中，刷新页面后会丢失，如果需要持久化参数，可改用URL查询参数（如/birthday?email=xxx）或本地存储（localStorage/sessionStorage）
• 确保跳转时state中的参数已有值（你已确认输入框值可正常获取，此点无需担心）

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