如何將 React 發送到 Express 服務器獲取請求傳遞 ID

Question

你好，我正在學習 MERN Stack dev，所以我正在嘗試實現一個 get 請求，通過我發送和 ID，然后嘗試通過 id 搜索集合，將條目返回給客戶端，所以我一直在嘗試實現這個，但我不知道我哪里出錯了，因為我收到了 404 響應

下面的代碼是我嘗試通過 get 請求發送的客戶端

const ProductDetails = (props) => {
  const product_id = window.location.href.split("/")[4];
  console.log(product_id);

  const getProduct = () => {
    const url = `http://127.0.0.1:5000/single-women-clothes/id?=${product_id}`;
    Axios.get(url)
      .then((response) => {
        console.log(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  };
  getProduct();
  return (
    <div>
      <h1>Details</h1>
    </div>
  );
};



router.get("/single-womens-clothes/:id", (request, response) => {
  console.log(request.params);
  MongoClient.connect(
    mongoURI,
    { useNewUrlParser: true, useUnifiedTopology: true },
    (error, client) => {
      client
        .db("OnlineStore")
        .collection("WomensClothes")
        .find(request.params.id)
        .toArray()
        .then((data) => {
          response.status(200).json(data);
        })
        .then((response) => {
          console.log("Single Female Product Fetch Successful");
        })
        .catch((error) => {
          console.log(error);
        });
    }
  );
});

我能否獲得有關如何將 ID 傳遞給服務器然后通過此給定 ID 搜索集合的幫助

Answer 1

每當您遇到 404 錯誤時，問題通常是由於放置了錯誤的 url。

在您的前端：

single-women-clothes/id?=${product_id}

后端

/single-womens-clothes/:id

您在“女性”的前端網址中缺少“s”

---

回答你的第二個問題：

你不應該做id?=只是簡單地將其保留為

single-women-clothes/${product_id}