如何将gridView列表模型每个元素路由到不同的页面

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

// 定义网格视图组件
const GridView = ({ items }) => {
  return (
    <div>
      {items.map((item) => (
        <Link key={item.id} to={`/item/${item.id}`}>
          <div>{item.name}</div>
        </Link>
      ))}
    </div>
  );
};

// 定义目标页面组件
const ItemDetailPage = ({ match }) => {
  const itemId = match.params.itemId;

  // 根据itemId获取特定元素的详细信息或执行其他操作

  return (
    <div>
      <h1>Item Detail</h1>
      <p>Item ID: {itemId}</p>
      {/* 展示特定元素的详细信息 */}
    </div>
  );
};

// 定义根组件
const App = () => {
  const items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
  ];

  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <GridView items={items} />
        </Route>
        <Route path="/item/:itemId" component={ItemDetailPage} />
      </Switch>
    </Router>
  );
};

export default App;