如何从Route获取数据并将其显示在html页面中？

app.get('/data', (req, res) => {
  // 在这里编写获取数据的逻辑
  // 可以通过调用数据库查询、API请求等方式获取数据

  // 假设获取到的数据为一个数组，如[{ name: 'John', age: 25 }, { name: 'Jane', age: 30 }]
  const data = [
    { name: 'John', age: 25 },
    { name: 'Jane', age: 30 }
  ];

  res.json(data); // 将数据以JSON格式返回给前端页面
});

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

const DataPage = () => {
  const { id } = useParams();
  const [data, setData] = useState([]);

  useEffect(() => {
    // 在组件加载时发起GET请求获取数据
    fetch(`/data/${id}`)
      .then(response => response.json())
      .then(data => setData(data));
  }, [id]);

  return (
    <div>
      {data.map(item => (
        <div key={item.name}>
          <p>Name: {item.name}</p>
          <p>Age: {item.age}</p>
        </div>
      ))}
    </div>
  );
};

export default DataPage;