React中通过Link组件向ProjectDetail页面传递参数的方法

嘿，作为React新手遇到这种路由传参的问题太正常啦～我来给你两种常用的解决方案，都很容易上手：

方法一：通过URL路由参数传递（最推荐，参数会显示在URL中） #

这种方式是把项目的唯一标识（比如ID）放到URL里，优点是直观、刷新页面参数不会丢失，适合公开的项目标识。

步骤1：修改你的projectItem组件中的Link #

把项目的唯一参数（比如this.props.id，如果没有id用name也可以，但id更可靠，避免重名）拼接到路由路径里：

render() {
  return (
    <Link to={`/projectDetail/${this.props.id}`} >
      <div className="projectItem">
        <h1>{this.props.name}</h1>
        <LazyLoad
          height={400}
          offsetTop={0}
          imageProps={{
            src: this.props.thumb,
            alt: this.props.name,
            ref: "image",
          }}
        />
      </div>
    </Link>
  );
}

步骤2：修改app.js中的Route配置 #

在路由路径里添加参数占位符（:projectId，名字可以自定义），告诉React这里是一个动态参数：

<Route path="/projectDetail/:projectId" component={ProjectDetail} />

步骤3：在ProjectDetail组件中获取参数 #

通过this.props.match.params就能拿到传递过来的参数了：

class ProjectDetail extends React.Component {
  render() {
    // 获取URL里的projectId
    const projectId = this.props.match.params.projectId;
    // 之后你就可以用这个id去匹配对应的项目数据啦
    return (
      <div>
        <h1>项目ID：{projectId}</h1>
        {/* 其他项目详情内容 */}
      </div>
    );
  }
}

方法二：通过Link的state传递（参数不会显示在URL中） #

如果不想把参数暴露在URL里，可以用这种方式，但要注意刷新页面后state会丢失，适合临时传递一些非关键参数。

步骤1：修改projectItem组件的Link #

用对象形式的to属性，通过state字段传递参数：

render() {
  return (
    <Link 
      to={{
        pathname: "/projectDetail",
        state: {
          projectId: this.props.id,
          projectName: this.props.name,
          projectThumb: this.props.thumb
        }
      }}
    >
      <div className="projectItem">
        <h1>{this.props.name}</h1>
        <LazyLoad
          height={400}
          offsetTop={0}
          imageProps={{
            src: this.props.thumb,
            alt: this.props.name,
            ref: "image",
          }}
        />
      </div>
    </Link>
  );
}

步骤2：Route配置保持不变 #

你的原有Route配置不需要修改：

<Route path="/projectDetail" component={ProjectDetail} />

步骤3：在ProjectDetail组件中获取state参数 #

通过this.props.location.state获取传递的参数，记得加个判断避免刷新后state为空报错：

class ProjectDetail extends React.Component {
  render() {
    const { projectId, projectName } = this.props.location.state || {};
    return (
      <div>
        <h1>项目名称：{projectName}</h1>
        <p>项目ID：{projectId}</p>
        {/* 其他项目详情内容 */}
      </div>
    );
  }
}

两种方法都能帮你区分点击的是哪个projectItem，推荐用第一种URL参数的方式，更稳定可靠哦～

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