React路由匹配问题：如何根据路由动态渲染对应Template组件

你的问题核心是没有根据路由参数templateTitle匹配数组中对应的模板项——之前的pathGit和title函数直接返回了数组第一个元素，所以不管路由参数是什么，页面都会显示第一个模板的内容。下面是具体的修复方案：

方案一：在路由层处理匹配后传递给组件 #

1. 在App.js中，使用useParams获取路由参数，找到对应的模板后再传递给Template组件：

// App.js
import { Routes, Route, useParams } from 'react-router-dom';
import Template from './Template';

// 你的模板数据数组
const templates = [
  { title: 'firstPortfolio', gitPath: 'https://github.com/xxx/firstPortfolio' },
  { title: 'leadershipEvent', gitPath: 'https://github.com/xxx/leadershipEvent' },
  // 其他模板项...
];

// 封装一个路由包装组件来处理匹配逻辑
const TemplateRoute = () => {
  const { templateTitle } = useParams();
  // 根据路由参数匹配对应的模板
  const targetTemplate = templates.find(item => item.title === templateTitle);
  
  // 处理模板不存在的情况
  if (!targetTemplate) {
    return <div>该模板不存在</div>;
  }
  
  return <Template gitPath={targetTemplate.gitPath} />;
};

function App() {
  return (
    <Routes>
      <Route path="/portfolio/:templateTitle" element={<TemplateRoute />} />
      // 其他路由配置...
    </Routes>
  );
}

export default App;

2. 修改Template组件，直接使用传入的gitPath属性：

// Template.jsx
function Template({ gitPath }) {
  return (
    <div>
      <iframe src={gitPath} title="模板预览" />
    </div>
  );
}

export default Template;

方案二：在Template组件内部直接处理匹配 #

如果不想在路由层处理，可以把模板数组和匹配逻辑放在Template组件内：

// Template.jsx
import { useParams } from 'react-router-dom';

const templates = [
  { title: 'firstPortfolio', gitPath: 'https://github.com/xxx/firstPortfolio' },
  { title: 'leadershipEvent', gitPath: 'https://github.com/xxx/leadershipEvent' },
];

function Template() {
  const { templateTitle } = useParams();
  const targetTemplate = templates.find(item => item.title === templateTitle);
  
  if (!targetTemplate) {
    return <div>找不到对应的模板</div>;
  }
  
  return (
    <div>
      <iframe src={targetTemplate.gitPath} title={targetTemplate.title} />
    </div>
  );
}

export default Template;

关键注意点 #

• 一定要用useParams()钩子获取路由中的templateTitle参数（React Router v6+版本用法）
• 使用数组的find()方法，通过title字段精准匹配对应的模板项
• 必须处理匹配失败的情况（比如输入不存在的模板名称），避免页面报错

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