ReactJS中useNavigate无法传递数据的问题求助

问题根源 #

你的代码存在两个关键错误：

• 跳转时未将数据正确放入state配置对象中
• 接收数据时未从location.state中取值

修正步骤 #

1. 调整InfoModal.js的跳转逻辑

将navigate的第二个参数改为包含state的配置对象，把要传递的数据存入其中：

import React, {useState} from "react";
import {Modal, Button }from 'react-bootstrap';
import {useNavigate } from "react-router-dom";

export default function InfoModal(props) {
  const navigate = useNavigate();
  const showname = props.name;
  // 修正：将数据放入state对象中传递
  const navigateTo = () => {navigate('/form', { state: { showname } });};
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  const originalStr = props.summary;
  const newStr = originalStr.replace(/(<([^>]+)>)/ig, '');
  return (
    <>
      <Button className="nextButton mx-2 my-1" onClick={handleShow}>
        Details
      </Button>

      <Modal show={show} onHide={handleClose}>
      <div className="modal-header h4">
       {props.name}
      </div>
        <Modal.Body>{newStr}</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={navigateTo}>
            Book Now
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

2. 修正Form.js的取值逻辑

从location.state中提取数据，同时添加空值兜底避免报错：

import {useNavigate } from "react-router-dom";
import { useLocation } from "react-router-dom";


function Form() {
    const location = useLocation();
    // 修正：从state中取值，添加空值处理防止undefined报错
    const { showname } = location.state || {};
    console.log('Movie Name:', showname);
    const navigate = useNavigate();
    const navigateTo = () => navigate('/');

    return (
        <form className="container-fluid my-3">
        <div className="form-group mx-3">
          <label>Movie Name</label>
          {/* 可选：将传递的名称设为输入框默认值 */}
          <input type="text" className="form-control" id="exampleFormControlInput1" defaultValue={showname || ''}>
            </input>
        </div>
        <div className="form-group mx-3">
          <label>Email address</label>
          <input type="email" className="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
            </input>
        </div>
        <div className="form-group mx-3">
          <label htmlFor="exampleFormControlSelect1">Timing</label>
          <select className="form-control" id="exampleFormControlSelect1">
            <option className="mx-3">9:00 a.m.</option>
            <option>12:00 p.m.</option>
            <option>3:00 p.m.</option>
            <option>6:00 p.m.</option>
            <option>9:00 p.m.</option>
          </select>
        </div>
        <div className="form-group mx-3">
          <label htmlFor="exampleFormControlSelect1">Day</label>
          <select className="form-control" id="exampleFormControlSelect1">
            <option className="mx-3">Today.</option>
            <option>Tomorrow</option>
            <option>Day After Tomorrow</option>
          </select>
        </div>
        <button type="submit" className="btn btn-primary mx-3">Submit</button>
        <button type="button" className="btn btn-secondary mx-3" onClick={navigateTo}>Cancel</button>
      </form>
    )
}

export default Form;

额外提示 #

• React元素中class属性需改为className，for属性需改为htmlFor，避免控制台警告
• Cancel按钮的type设为button，防止触发表单默认提交行为
• location.state存储在内存中，刷新页面后会丢失。若需刷新后保留数据，可改用URL参数或本地存储方案

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