Router跳转组件时传递参数失败，请求技术协助

看起来你已经搞定了表单验证和页面跳转，但参数传递这块卡壳了对吧？别担心，咱们来一步步解决这个问题，分React Router v5和v6两种常见版本给你方案——毕竟这俩版本的跳转API差异不小。

先明确核心需求 #

• 点击「下一步」时，先验证当前页面输入内容
• 验证通过后，跳转到/AddModule页面，同时传递Name字段的值
• 基于React Router实现

方案1：React Router v5 版本（类组件/函数组件通用） #

如果你用的是v5，咱们可以借助history对象来实现带参跳转，类组件需要用withRouter包裹才能拿到history props：

当前页面（类组件示例） #

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

class CurrentPage extends React.Component {
  state = {
    Name: '',
    // 其他表单字段
  };

  // 表单验证逻辑
  validateForm = () => {
    const { Name } = this.state;
    if (!Name.trim()) {
      alert('请填写Name字段');
      return false;
    }
    // 这里可以加其他输入验证规则
    return true;
  };

  onSubmit = (evnt) => {
    evnt.preventDefault();
    // 先执行验证，不通过就终止流程
    if (!this.validateForm()) {
      return;
    }
    // 验证通过后，携带参数跳转
    this.props.history.push({
      pathname: '/AddModule',
      state: { Name: this.state.Name } // 把Name存在state里传递
    });
  };

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.Name}
          onChange={(e) => this.setState({ Name: e.target.value })}
          placeholder="请输入Name"
        />
        <button onClick={this.onSubmit}>下一步</button>
      </div>
    );
  }
}

// 必须用withRouter包裹，才能拿到history、location等props
export default withRouter(CurrentPage);

目标组件（AddModule）接收参数 #

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

class AddModule extends React.Component {
  componentDidMount() {
    // 从location.state里取传递的参数，加个默认值避免报错
    const { Name } = this.props.location.state || {};
    console.log('收到的Name参数：', Name);
    // 这里可以把参数存到组件state或者做后续处理
  }

  render() {
    const { Name } = this.props.location.state || {};
    return <div>当前接收的Name：{Name}</div>;
  }
}

export default withRouter(AddModule);

方案2：React Router v6 版本（函数组件友好） #

v6里移除了withRouter和history对象，改用useNavigate和useLocation钩子，代码更简洁：

当前页面（函数组件示例） #

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

const CurrentPage = () => {
  const [Name, setName] = useState('');
  const navigate = useNavigate();

  // 表单验证函数
  const validateForm = () => {
    if (!Name.trim()) {
      alert('请填写Name字段');
      return false;
    }
    // 其他验证逻辑
    return true;
  };

  const onSubmit = (evnt) => {
    evnt.preventDefault();
    if (!validateForm()) {
      return;
    }
    // 携带参数跳转
    navigate('/AddModule', {
      state: { Name } // 传递Name参数
    });
  };

  return (
    <div>
      <input
        type="text"
        value={Name}
        onChange={(e) => setName(e.target.value)}
        placeholder="请输入Name"
      />
      <button onClick={onSubmit}>下一步</button>
    </div>
  );
};

export default CurrentPage;

目标组件（AddModule）接收参数 #

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

const AddModule = () => {
  const location = useLocation();
  // 取参数时加默认值，避免首次加载时state为空报错
  const { Name } = location.state || {};

  return <div>当前接收的Name：{Name}</div>;
};

export default AddModule;

为什么你之前的方法没成功？ #

你之前应该是用了Link组件的to="/AddModule"吧？但Link直接写字符串路径的话，没法传递state参数，而且点击Link会直接跳转，没法先执行表单验证。所以正确的做法是不要用Link绑定按钮，而是给按钮加点击事件，先完成验证，再调用Router的跳转API并携带参数。

另外补充个小细节：

• 用state传递的参数不会显示在URL里，适合传递不需要暴露的内容
• 如果需要把参数显示在URL里（比如/AddModule?name=xxx），可以用URL搜索参数：

  // 跳转时
  navigate(`/AddModule?name=${encodeURIComponent(Name)}`);
  // 接收时用useSearchParams钩子
  const [searchParams] = useSearchParams();
  const Name = searchParams.get('name');
  

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