React路由配置疑问：Portfolio中Read More跳转对应组件实现

1. 修正Portfolio JSON的数据结构 #

别在JSON的link字段里存<Link>格式的字符串——React不会把字符串解析成组件，只会原样输出文本。改成存储跳转的路径字符串即可，示例：

// portfolio.json
[
  {
    "id": 1,
    "title": "Web开发项目",
    "description": "基于React的Web应用",
    "link": "/webdev"
  },
  {
    "id": 2,
    "title": "App开发项目",
    "description": "跨平台移动应用",
    "link": "/appdev"
  }
]

2. 在portfolio.jsx中正确渲染跳转链接 #

导入React Router的<Link>组件，遍历数据时用它包裹"Read More"文本，把JSON里的link值传给to属性：

// portfolio.jsx
import { Link } from 'react-router-dom';
import portfolioData from './portfolio.json';

export default function Portfolio() {
  return (
    <div className="portfolio-container">
      {portfolioData.map(project => (
        <div key={project.id} className="project-card">
          <h3>{project.title}</h3>
          <p>{project.description}</p>
          <Link to={project.link}>Read More</Link>
        </div>
      ))}
    </div>
  );
}

3. 配置React Router路由规则 #

React Router的配置一般放在项目根入口文件（比如main.jsx或App.jsx），步骤如下：

1. 导入Router核心组件：BrowserRouter、Routes、Route
2. 导入跳转目标组件（如WebDev、AppDev）
3. 用BrowserRouter包裹整个应用，内部通过Routes定义路径与组件的映射：

// main.jsx（或App.jsx）
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Portfolio from './portfolio.jsx';
import WebDev from './WebDev.jsx';
import AppDev from './AppDev.jsx';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Portfolio />} />
        <Route path="/webdev" element={<WebDev />} />
        <Route path="/appdev" element={<AppDev />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

关键注意事项 #

• 确保已安装react-router-dom：执行npm install react-router-dom或yarn add react-router-dom
• 所有使用<Link>的组件，必须被BrowserRouter（或HashRouter等Router类型）包裹，否则会报错
• 路由路径要和JSON里的link值完全匹配，注意开头的斜杠

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