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

npm install react-router-dom

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

function 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 projects = [
  { id: 1, name: 'Project A' },
  { id: 2, name: 'Project B' },
  // 其他项目...
];

function ProjectList() {
  return (
    <ul>
      {projects.map(project => (
        <li key={project.id}>
          <Link to={`/project/${project.id}`}>{project.name}</Link>
        </li>
      ))}
    </ul>
  );
}

export default ProjectList;

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

function ProjectDetail() {
  const { id } = useParams();

  // 这里可以根据id获取项目的详细信息
  const project = projects.find(p => p.id === parseInt(id));

  if (!project) {
    return <div>Project not found</div>;
  }

  return (
    <div>
      <h1>{project.name}</h1>
      <p>Details about {project.name}...</p>
    </div>
  );
}

export default ProjectDetail;