React中点击按钮如何将表单数据传递给路由'/second'对应的Second组件

方案1：React Router 路由状态传参（最适配你的场景，优先推荐） #

该方案是React Router自带能力，无额外依赖、不需要读写本地存储、数据不会暴露在地址栏，比localStorage方案更高效安全。

第一步：修改FormComponent.tsx代码 #

引入路由跳转hook，提交时携带表单数据跳转路由即可：

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

const FormComponent = () => {
  const firstName = React.useRef(null);
  const lastName = React.useRef(null);
  // 修正你原有代码的ref命名不匹配问题
  const email = React.useRef(null);
  const password = React.useRef(null);
  const navigate = useNavigate();

  const handleSubmit = e => {
    e.preventDefault();
    const data = {
      firstName: firstName.current.value,
      lastName: lastName.current.value,
      emailAddress: email.current.value,
      password: password.current.value,
    }
    // 跳转时把表单数据塞入路由状态
    navigate('/second', { state: data });
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={firstName} name="firstName" required />
      <input type="text" ref={lastName} name="lastName" required />
      <input type="text" ref={email} name="email" required />
      <input type="password" ref={password} name="password" required />
      <button type="submit">Submit</button>
    </form>
  )
}

第二步：Second.tsx 接收表单数据 #

用useLocation hook直接读取路由携带的状态即可：

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

const Second = () => {
  const location = useLocation();
  const formData = location.state;

  // 可选兜底逻辑：处理用户直接访问/second、刷新页面导致state丢失的情况
  if (!formData) {
    return <div>无效访问，请先提交表单</div>
  }

  return (
    <div>
      <p>姓名：{formData.firstName} {formData.lastName}</p>
      <p>邮箱：{formData.emailAddress}</p>
    </div>
  )
}

方案优势 #

• 数据存在内存中，读写性能高于本地存储
• 敏感数据不会暴露在URL地址栏
• 不需要引入额外第三方库，开箱即用

其他可选适配方案 #

方案2：URL查询参数 #

适合数据量小、无敏感信息、需要支持页面刷新/链接分享的场景：

• 提交时把参数拼接在URL后跳转：navigate(/second?firstName=${encodeURIComponent(firstName.current.value)}&lastName=${encodeURIComponent(lastName.current.value)})
• Second组件用useSearchParams hook即可读取参数
  注意：禁止用该方案传递密码等敏感信息，参数会明文展示在地址栏

方案3：全局状态管理 #

如果表单数据需要在多个跨路由组件中复用，可以用Zustand/Redux/Jotai等全局状态管理库，提交时把数据存入全局store，任意组件都可以直接读取，还可以搭配持久化插件解决刷新丢失的问题。

方案4：sessionStorage存储 #

比localStorage更适合临时存储的场景，关闭浏览器标签页就会自动清除，不会永久残留敏感数据：

• 提交时存储：sessionStorage.setItem('formData', JSON.stringify(data))
• Second组件读取：const formData = JSON.parse(sessionStorage.getItem('formData') || '{}')
• 数据使用完成后可手动删除避免残留：sessionStorage.removeItem('formData')

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