Json-server GET请求404：React无法通过ID访问单个项目

已成功展示db.json文件中的数据，但尝试通过指定ID访问单个项目（如localhost:3000/projects/1）时，页面显示Not Found。db.json通过8000端口监听，React应用运行在3000端口。

项目列表展示正常： #

点击单个项目时的错误： #

直接访问localhost:8000/projects/1正常： #

相关文件代码 #

projectList.js（用于格式化每条数据） #

import { Link } from "react-router-dom";
const ProjectList = ({ projectProp, titleProp, handleDelete }) => {
  // 解构projectProp和titleProp
  const projects = projectProp;

  return (
    <div className="project-list">
      <h2>{titleProp}</h2>
      {projects.map((project) => (
        <div className="project-preview" key={project.id}>
          <Link to={`/projects/${project.id}`}>
            <h2>{project.title}</h2>
            <p>{project.body}</p>
          </Link>
          <button onClick={() => handleDelete(project.id)}>
            删除项目
          </button>
        </div>
      ))}
    </div>
  );
};

export default ProjectList;

projectDetails.js（点击项目时路由到对应projects/{id}链接并获取数据） #

import { useParams } from "react-router-dom";
import useFetch from "./useFetch";
const ProjectDetails = () => {
  const { id } = useParams();
  console.log("请求的项目ID:", id);
  const url = "http://localhost:8000/projects/" + id;
  const { data: project, error, isPending } = useFetch(url);
  console.log(url);

  return (
    <div className="project-details">
      {isPending && <div>加载中...</div>}
      {error && <div>{error}</div>}
      {project && (
        <article>
          <h2>{project.title}</h2>
          <div>{project.body}</div>
        </article>
      )}
      ID为{id}的项目
    </div>
  );
};

export default ProjectDetails;

Home.js（首页组件） #

import ProjectList from "./ProjectList";
import useFetch from "./useFetch";
const Home = () => {
  const {
    data: projects,
    isPending,
    error,
  } = useFetch("http://localhost:8000/projects");

  return (
    <div className="home">
      {error && <div>{error}</div>}
      {isPending && <div>加载中...</div>}
      {projects && (
        <ProjectList
          projectProp={projects}
          titleProp="所有项目"
          /*handleDelete={handleDelete}*/
        />
      )}
    </div>
  );
};

export default Home;

data/db.json（数据源文件） #

{
  "projects": [
    {
      "id": 1,
      "title": "第一个项目",
      "body": "你好"
    },
    {
      "id": 2,
      "title": "第二个项目",
      "body": "你好"
    },
    {
      "id": 3,
      "title": "第三个项目",
      "body": "你好"
    }
  ]
}

useFetch.js（自定义Hook，用于发起数据请求） #

import { useEffect, useState } from "react";
const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [isPending, setIsPending] = useState(true);
  const [error, setError] = useState();
  useEffect(() => {
    setTimeout(() => {
      fetch(url)
        .then((res) => {
          if (!res.ok) {
            console.log(res);
            throw Error("无法获取该资源的数据");
          }
          return res.json();
        })
        .then((data) => {
          setData(data);
          setIsPending(false);
          setError(null);
        })
        .catch((err) => {
          setError(err.message);
          setIsPending(false);
        });
    }, 1000);
  }, [url]);

  return {
    data,
    isPending,
    error,
  };
};

export default useFetch;

App.js（路由配置组件） #

function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <div className="content">
          <Routes>
            <Route path="/" element={<Home />}></Route>
            <Route path="/project" element={<Project />}></Route>
            <Route path="/create" element={<Create />}></Route>
            <Route path="/projects/:id" element={<ProjectDetails />}></Route>
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

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