使用键和值，而不仅仅是id，为mongodb数据创建react路由get请求

npm install react-router-dom axios

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import axios from "axios";

import React, { useState, useEffect } from "react";

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

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

  const fetchData = async () => {
    try {
      const response = await axios.get("/api/data"); // 这里的/api/data是示例，根据实际情况修改为你的后端接口路径
      setData(response.data);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>
          <p>{item.key}</p>
          <p>{item.value}</p>
        </div>
      ))}
    </div>
  );
};

export default DataComponent;

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import DataComponent from "./DataComponent";

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/data">Data</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/data" component={DataComponent} />
      </div>
    </Router>
  );
};

const Home = () => {
  return <h1>Welcome to the Home Page</h1>;
};

export default App;

const express = require("express");
const router = express.Router();

router.get("/api/data", async (req, res) => {
  try {
    // 从MongoDB获取数据的代码
    // 你可以使用任何合适的MongoDB驱动程序或ORM来执行此操作
    const data = await YourDataModel.find();

    res.json(data);
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: "Internal Server Error" });
  }
});

module.exports = router;