React使用react-router-dom跳转时如何获取上一页输入框的数据

1. 改造搜索页组件，绑定输入状态并带参跳转 #

原代码里的<Link>组件无法在跳转前动态获取输入框内容，需要改成受控组件+编程式路由跳转实现，代码如下：

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

function SearchPage(){
  // 定义受控状态存储两个输入框的内容
  const [cityName, setCityName] = useState("");
  const [peopleCount, setPeopleCount] = useState("");
  const navigate = useNavigate();

  const handleSearch = () => {
    // 可根据需求加参数校验，比如非空判断
    if(!cityName.trim() || !peopleCount.trim()) return;
    // 跳转时携带参数，用state传递不会在地址栏显示参数，也可拼接在路径后做查询参数
    navigate("/nextpage", {
      state: {
        city: cityName,
        peopleNum: peopleCount
      }
    })
  }

  return(
    <div className="search">
      <input 
        type="text"
        placeholder="city name"
        value={cityName}
        onChange={(e) => setCityName(e.target.value)}
      />
      <input 
        type="number"
        placeholder="number of people"
        value={peopleCount}
        onChange={(e) => setPeopleCount(e.target.value)}
      />
      <p>
        <button onClick={handleSearch}>Search</button>
      </p>
    </div>
  )
}
export default SearchPage;

2. 实现结果页逻辑，读取参数请求接口并渲染卡片 #

在/nextpage对应的组件内读取路由携带的参数，发起API请求后将返回结果渲染为卡片，代码如下：

import React, { useState, useEffect } from "react";
import { useLocation } from "react-router-dom";

function NextPage(){
  const location = useLocation();
  const [cardList, setCardList] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    // 读取上一页传递的搜索参数
    const searchParams = location.state;
    if(!searchParams?.city || !searchParams?.peopleNum) return;

    const fetchCardData = async () => {
      setLoading(true);
      try {
        // 替换为实际接口地址，参数规则按后端要求调整
        const res = await fetch(`https://你的接口域名/api/search?city=${searchParams.city}&count=${searchParams.peopleNum}`);
        const result = await res.json();
        // 假设接口返回的卡片列表字段为result.data
        setCardList(result.data || []);
      } catch (err) {
        console.error("请求失败：", err);
      } finally {
        setLoading(false);
      }
    }
    fetchCardData();
  }, [location.state]);

  if(loading) return <div>加载中...</div>

  return(
    <div className="result-page">
      <h2>搜索结果</h2>
      <div className="card-wrapper">
        {cardList.length === 0 ? (
          <p>暂无匹配结果</p>
        ) : (
          cardList.map((item, index) => (
            <div key={index} className="card">
              {/* 按实际需求渲染卡片字段，以下为示例 */}
              <h3>{item.hotelName}</h3>
              <p>所在城市：{item.city}</p>
              <p>最大入住人数：{item.maxPeople}</p>
              <p>价格：¥{item.price}/晚</p>
            </div>
          ))
        )}
      </div>
    </div>
  )
}
export default NextPage;

注意事项 #

• 如果需要支持页面分享，可将参数拼接在路由查询字符串中传递，对应通过useSearchParams()钩子读取参数即可
• 接口请求的参数名、返回字段需和实际后端接口规则对齐，示例代码仅做参考
• 需确保路由配置中/nextpage路径对应的组件为上述NextPage组件

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