我正在尝试使用存储在data.json文件中的数据实现动态路由，该文件存储在React项目中的公共文件夹中。这个想法是创建一个Airbnb风格的网站，用户可以查看每个属性的专用页面。我只是尝试使用本地存储的静态数据而不是数据库来实现这一点。
我的问题是，我似乎不知道如何传递id参数到我的获取URL类似于这个. const { data } = await axios.get( https：//jsonplaceholder.typicode.com/posts/${id} )
我不确定是否有一个不同的或更好的方法来实现预期的结果。我能够实现'useParams'来获取参数，但我不确定如何将其匹配到json数据的获取并动态加载json项。
任何帮助是非常感谢！
我尝试将其添加到data.json获取URL的末尾，尝试将${property.id}添加到data.json获取URL的末尾，但没有成功。
下面是我的代码：
data.json

[
  {
    "id": 1,
    "name": "House 1"
  },
  {
    "id": 2,
    "name": "House 2"
  },
  {
    "id": 3,
    "name": "House 3"
  }
]

字符串
App.jsx

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Rentals from "./pages/rentals/Rentals";
import RentalPage from "./pages/rentalPage/RentalPage";

import "./App.css";

function App() {
  return (
    <>
      <Router>
        <Routes>
          <Route path="/" element={<Navigation />}>
            <Route path="rentals" element={<Rentals />} />
            <Route path="rentals/:id" element={<RentalPage />} />
          </Route>
        </Routes>
      </Router>
    </>
  );
}

export default App;

型
Rentals.jsx

import { useEffect, useState } from "react";
import { Link } from "react-router-dom";

const Rentals = () => {
  const [data, setData] = useState([]);

  const getData = () => {
    fetch("/data.json", {
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
    })
      .then(function (response) {
        return response.json();
      })
      .then(function (myJson) {
        setData(myJson);
      });
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    <>
      {data.map((property) => (
        <div key={property.id}>
          <h2>{property.name}</h2>
          <Link to={`/rentals/${property.id}`}>BOOK NOW</Link>
        </div>
      ))}
    </>
  );
};

export default Rentals;

型
RentalPage.jsx

import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

const RentalPage = () => {
  const { id } = useParams();
  const [properties, setProperties] = useState([]);

  const getData = () => {
    fetch("/data.json", {
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
    })
      .then(function (response) {
        return response.json();
      })
      .then(function (myJson) {
        setProperties(myJson);
      });
  };

  useEffect(() => {
    getData();
  }, []);

  
  return (
{/* how to get this page to load the right object from data.json? */}
<h1>{property.name}</h1>)
};

export default RentalPage;

型