我想获取产品，并在Reactjs中用相同的数据点击发送到详细页面

// 导入所需的库和组件
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

// 产品列表组件
const ProductList = () => {
  // 模拟产品数据
  const products = [
    { id: 1, name: '产品1', description: '这是产品1的描述' },
    { id: 2, name: '产品2', description: '这是产品2的描述' },
    { id: 3, name: '产品3', description: '这是产品3的描述' },
  ];

  // 处理产品点击事件
  const handleProductClick = (product) => {
    // 导航到详细页面，并将产品数据作为URL参数传递
    window.location.href = `/product/${product.id}`;
  };

  return (
    <div>
      <h1>产品列表</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id} onClick={() => handleProductClick(product)}>
            {product.name}
          </li>
        ))}
      </ul>
    </div>
  );
};

// 详细页面组件
const ProductDetail = (props) => {
  // 从URL参数中获取产品数据
  const productId = props.match.params.productId;
  // 根据产品ID获取产品数据（可以从后端服务器或数据库中获取）

  // 模拟产品数据
  const product = { id: productId, name: '产品1', description: '这是产品1的详细信息' };

  return (
    <div>
      <h1>产品详情</h1>
      <h2>{product.name}</h2>
      <p>{product.description}</p>
    </div>
  );
};

// 应用程序组件
const App = () => {
  return (
    <Router>
      <div>
        <Route exact path="/" component={ProductList} />
        <Route path="/product/:productId" component={ProductDetail} />
      </div>
    </Router>
  );
};

export default App;