React中页面导航后如何将表单提交数据传递至新页面？

嘿，刚好我之前用react-router-dom v6做类似的表单跳转需求时，踩过几个坑，给你分享两个不用Redux或全局状态的实用办法，完全符合你的要求：

方法1：用useNavigate的state参数传递（推荐无敏感数据且不需要持久化的场景） #

这个是v6里最直接的方案，导航时把表单数据存在路由的state里，新页面通过useLocation就能拿到，完全不用全局状态，也不会有嵌套问题。

提交页面的代码实现 #

假设你已经用useState管理了表单的各个字段，在handleSubmit里这么写：

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

const FormComponent = () => {
  // 假设你用useState存表单字段
  const [http, setHttp] = useState('');
  const [bindIP, setBindIP] = useState('');
  const [host, setHost] = useState('');
  const [port, setPort] = useState('');
  const navigate = useNavigate();

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // 组装表单数据
    const formData = { http, bindIP, host, port };
    // 导航时把数据存在state中
    navigate('/listener-details', { state: { formData } });
  };

  // 表单JSX部分省略...
  return <form onSubmit={handleSubmit}>...</form>;
};

目标页面（/listener-details）取数据 #

在新页面用useLocation获取路由state里的表单数据，记得加TypeScript的类型断言避免报错：

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

const ListenerDetails = () => {
  const location = useLocation();
  // 用TS类型断言指定数据结构，避免类型报错
  const formData = location.state?.formData as {
    http: string;
    bindIP: string;
    host: string;
    port: string;
  };

  return (
    <div className="listener-details">
      <h2>Listener 配置详情</h2>
      <ul>
        <li>HTTP 设置: {formData.http}</li>
        <li>绑定IP: {formData.bindIP}</li>
        <li>主机地址: {formData.host}</li>
        <li>端口: {formData.port}</li>
      </ul>
    </div>
  );
};

export default ListenerDetails;

注意点 #

• 这个方法的state数据不会出现在URL里，适合不想暴露的非敏感数据（但要注意，浏览器开发者工具的历史记录里还是能看到，所以绝对敏感的数据别用这个）
• 硬刷新页面的话，state里的数据会丢失，因为这部分是存在客户端路由的历史栈里，不是持久化存储

方法2：用URL搜索参数传递（适合需要持久化或分享的场景） #

如果你的表单数据不需要保密，而且希望刷新页面后数据不丢失，或者可以分享带参数的链接，那用URL搜索参数是更好的选择。

提交页面的代码实现 #

用createSearchParams把表单数据转成URL参数，然后导航：

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

const FormComponent = () => {
  const [http, setHttp] = useState('');
  const [bindIP, setBindIP] = useState('');
  const [host, setHost] = useState('');
  const [port, setPort] = useState('');
  const navigate = useNavigate();

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // 把表单数据转成搜索参数
    const searchParams = createSearchParams({
      http,
      bindIP,
      host,
      port
    });
    // 导航到目标页面，带上搜索参数
    navigate({
      pathname: '/listener-details',
      search: `?${searchParams}`
    });
  };

  return <form onSubmit={handleSubmit}>...</form>;
};

目标页面（/listener-details）取数据 #

用useSearchParams钩子直接获取URL里的参数：

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

const ListenerDetails = () => {
  // useSearchParams返回一个数组，第一个元素就是搜索参数对象
  const [searchParams] = useSearchParams();
  
  // 逐个取出参数，或者转成对象
  const formData = {
    http: searchParams.get('http') || '',
    bindIP: searchParams.get('bindIP') || '',
    host: searchParams.get('host') || '',
    port: searchParams.get('port') || ''
  };

  return (
    <div className="listener-details">
      <h2>Listener 配置详情</h2>
      <ul>
        <li>HTTP 设置: {formData.http}</li>
        <li>绑定IP: {formData.bindIP}</li>
        <li>主机地址: {formData.host}</li>
        <li>端口: {formData.port}</li>
      </ul>
    </div>
  );
};

export default ListenerDetails;

注意点 #

• 数据会明文出现在URL里，所以别放密码、密钥这类敏感信息
• 硬刷新页面数据不会丢失，还能直接分享这个链接给别人，对方打开就能看到相同的详情

内容来源于stack exchange