尝试将每个li元素路由到一个组件，该组件显示项目的详细页面

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import ProjectList from './components/ProjectList';
import ProjectDetail from './components/ProjectDetail';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={ProjectList} />
        <Route path="/project/:id" component={ProjectDetail} />
      </Switch>
    </Router>
  );
};

export default App;

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

const ProjectList = () => {
  // 假设projects是一个包含项目信息的数组
  const projects = [
    { id: 1, title: 'Project 1' },
    { id: 2, title: 'Project 2' },
    { id: 3, title: 'Project 3' }
  ];

  return (
    <div>
      <h1>Project List</h1>
      <ul>
        {projects.map(project => (
          <li key={project.id}>
            <Link to={`/project/${project.id}`}>{project.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ProjectList;