React页面间如何传递Props？个人项目展示页传参问题求助

我正在开发个人项目展示网站，用组件实现页面交互。作品页通过<WorkText name={"personal1"} text={"some text goes here"} url={"./public/img1.jpg"}/>组件添加新项目，希望实现动态展示。该组件通过react-router-dom的Link跳转至/work/[name]路径，并传递包含name、text、url的state数据。但在WorkDetail页面中，用useLocation接收state时无法正常获取；用useParams仅能获取路径中的workname参数，需要解决页面间Props传递问题。

相关代码 #

WorkText组件代码 #

import React from "react";
import "./WorkText.scss";
import { Link } from "react-router-dom";

const WorkText = ({name, text, url}) => {

   const Data = {
      name,
      text,
      url
    }

  return (
    <p className="work-text-parent">
      <a className="bar">{type}/</a><Link to={{ pathname: "/work/" + name}} state={Data}>{name}</Link>
    </p>
  );
};

export default WorkText;

WorkDetail页面代码 #

import React from "react";
import { useLocation } from "react-router-dom";
import "./WorkDetail.scss";

const WorkDetail = () => {
  
  const location = useLocation();
  const { type, name, text, url } = location.state;
  console.log(location.state);

  return (
      <div className="work-parent2">
        <h2>{name}</h2>
        <img src={url} alt={name} />
        <p>{text}</p>
      </div>
  );
}

export default WorkDetail;

App.js路由配置 #

<Route exact path="/work/:workname" element={<> <NavbarExtended /> <WorkDetail /> <Footer /> </>}/>

解决方案 #

1. 修复WorkText组件的未定义变量问题 #

组件中{type}是未定义的props，会导致渲染错误，直接移除或替换为合理内容：

// 修改后的WorkText组件返回部分
return (
  <p className="work-text-parent">
    <a className="bar">作品/</a><Link to={{ pathname: `/work/${name}` }} state={Data}>{name}</Link>
  </p>
);

2. 修正WorkDetail的state解构逻辑 #

location.state中不存在type字段，且刷新页面后state会丢失（仅存在于会话历史中），需要添加默认值避免报错：

// 修改后的WorkDetail组件
const WorkDetail = () => {
  
  const location = useLocation();
  // 添加默认空对象，防止state为undefined时报错
  const { name, text, url } = location.state || {};
  console.log(location.state);

  return (
      <div className="work-parent2">
        <h2>{name || "作品名称"}</h2>
        {url && <img src={url} alt={name || "作品"} />}
        <p>{text || "暂无描述"}</p>
      </div>
  );
}

3. 关于React Router状态传递的注意事项 #

• useLocation获取的state仅在通过Link跳转时存在，刷新页面后state会丢失，因为它存储在浏览器会话历史中，而非URL或本地存储。
• 如果需要持久化数据，建议：
  • 将作品数据存在全局状态（如React Context、Redux），通过workname参数从全局数据中匹配对应内容；
  • 调用后端接口，根据workname参数获取作品详情。
• useParams用于获取URL路径中的参数（如这里的workname），和state传递是两种不同的参数传递方式，可结合使用：

  import { useParams, useLocation } from "react-router-dom";
  
  const WorkDetail = () => {
    const { workname } = useParams();
    const location = useLocation();
    // 可根据workname验证state中的name是否匹配，防止非法跳转
  }
  

内容的提问来源于stack exchange，提问作者Marc López Soler