React中按钮跳转至预订页时无法传递数据的问题及解决

问题说明 #

我有一个BookBtn按钮组件，在遍历演唱会列表的主组件里，用<a>标签包裹这个按钮实现跳转到预订页面，但点击后concert数据没法传递过去。

相关代码 #

BookBtn组件代码 #

import React from "react";

export const BookBtn = (props) => {
  return (
    <div>
      <button
        className="bookBtn"
        style={{ backgroundColor: props.color }}
        // onClick={props.func}
      >
        {props.text}
      </button>
    </div>
  );
};

BookBtn.defaultProps = {
  text: "Unavailable",
};

export default BookBtn;

主组件内按钮的使用方式 #

<a href={"/concert/" + concert.id} data={concert}>
  <BookBtn text="Book a ticket" />
</a>

预订页面Book组件代码 #

import React from "react";
import { useEffect, useState } from "react";
import axios from "axios";

export const Book = (data) => {
  const [concerts, setConcerts] = useState([]);
  const [tickets, setTickets] = useState([]);

  useEffect(() => {
    const loadConcerts = async () => {
      const resConcerts = await axios.get("data/concerts");
      const tickets = await axios.get("/data/tickets");
    };
  });
  return (
    <div>
      Booking page
      <h1>{data.name}</h1>
    </div>
  );
};

尝试过程 #

一开始用<a>标签包裹按钮，跳转功能正常，但concert数据始终传不到预订页面。

解决方法 #

用React Router的useLocation Hook成功实现了数据传递，具体操作如下：

1. 修改主组件的跳转逻辑：
   换掉<a>标签，给BookBtn绑定点击事件，用useNavigate携带状态：

   import { useNavigate } from 'react-router-dom';
   
   // 在主组件内部
   const navigate = useNavigate();
   
   // 使用BookBtn的方式修改为
   <BookBtn 
     text="Book a ticket" 
     func={() => navigate(`/concert/${concert.id}`, { state: concert })} 
   />
   

2. 在预订页面接收数据：
   用useLocation获取传递过来的concert数据：

   import { useLocation } from 'react-router-dom';
   
   export const Book = () => {
     const location = useLocation();
     const concert = location.state; // 获取传递的concert对象
   
     const [concerts, setConcerts] = useState([]);
     const [tickets, setTickets] = useState([]);
   
     useEffect(() => {
       const loadConcerts = async () => {
         const resConcerts = await axios.get("data/concerts");
         const ticketsRes = await axios.get("/data/tickets");
         setConcerts(resConcerts.data);
         setTickets(ticketsRes.data);
       };
       loadConcerts(); // 调用异步函数加载数据
     }, []);
   
     return (
       <div>
         Booking page
         <h1>{concert?.name}</h1>
       </div>
     );
   };
   

这样就能正常获取到传递的concert数据了。

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