React Router问题：无法在路由中同时使用Match Params与应用状态

嘿，我明白你遇到的困扰了——想通过/project/:projectID路由参数从你的portfolioData状态里拿到对应项目的数据对吧？别担心，这个问题很常见，我来一步步教你搞定它。

首先要注意，React Router的不同版本（v5和v6）在获取路由参数的方式上略有不同，我会分别说明两种主流版本的解法：

React Router v6（当前主流版本） #

在v6里，我们用useParams这个钩子来获取路由参数，然后结合你的应用状态找到对应项目。

实现步骤： #

1. 从react-router-dom导入useParams
2. 在组件中获取路由参数里的projectID
3. 把字符串类型的projectID转为数字（因为你的portfolioData里的key是数字）
4. 用数组的find方法从状态中匹配对应项目

完整代码示例： #

import { useParams } from 'react-router-dom';
import { useState } from 'react';
// 如果用全局状态的话，这里导入对应的Context或者Redux hooks

function ProjectDetail() {
  // 假设你的状态是用useState管理的，如果是全局状态就换成对应获取方式
  const [portfolioData] = useState([
    { key: 1, projectName : "project one", tags: ["ux", "dev"], mdFileName: "p1.md" },
    { key: 2, projectName : "project two", tags: ["ux", "dev"], mdFileName: "p2.md" },
    { key: 3, projectName : "project three", tags: ["ux", "dev"], mdFileName: "p3.md" }
  ]);
  
  // 获取路由参数
  const { projectID } = useParams();
  // 匹配对应项目，注意转成数字
  const currentProject = portfolioData.find(project => project.key === parseInt(projectID));

  // 处理项目不存在的情况
  if (!currentProject) {
    return <div>Oops! 项目不存在</div>;
  }

  return (
    <div className="project-detail">
      <h1>{currentProject.projectName}</h1>
      <div className="tags">
        {currentProject.tags.map(tag => (
          <span key={tag} className="tag">{tag}</span>
        ))}
      </div>
      {/* 这里可以用react-markdown之类的库渲染你的md文件内容 */}
    </div>
  );
}

export default ProjectDetail;

React Router v5（旧版本） #

如果你还在使用v5，获取参数的方式有两种：用useParams钩子（和v6类似），或者类组件里通过props.match.params。

函数组件示例（useParams）： #

import { useParams } from 'react-router-dom';
import { useState } from 'react';

function ProjectDetail() {
  const [portfolioData] = useState([/* 你的项目数据 */]);
  const { projectID } = useParams();
  const currentProject = portfolioData.find(p => p.key === parseInt(projectID));

  if (!currentProject) return <div>项目不存在</div>;

  return (
    <div>
      <h1>{currentProject.projectName}</h1>
    </div>
  );
}

类组件示例： #

import React from 'react';
import { withRouter } from 'react-router-dom';

class ProjectDetail extends React.Component {
  state = {
    portfolioData: [/* 你的项目数据 */]
  };

  render() {
    const { projectID } = this.props.match.params;
    const currentProject = this.state.portfolioData.find(p => p.key === parseInt(projectID));
    
    if (!currentProject) return <div>项目不存在</div>;
    
    return (
      <div>
        <h1>{currentProject.projectName}</h1>
        <p>标签：{currentProject.tags.join(', ')}</p>
      </div>
    );
  }
}

// 别忘了用withRouter包裹组件，才能拿到match参数
export default withRouter(ProjectDetail);

几个关键注意点： #

• 类型匹配：路由参数默认是字符串，而你的key是数字，一定要用parseInt()转换后再匹配，否则find会找不到对应项
• 错误处理：一定要加项目不存在的判断，避免渲染时出现undefined的错误
• 全局状态适配：如果你的portfolioData是全局状态（比如用Context API或Redux），只需要在组件中正确获取全局状态，然后用同样的find方法匹配路由参数即可

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