各モーダルにそれぞれ別のページへ遷移できるボタンを作りたい

前提・実現したいこと

Reactについての質問です。
react-routerを使ってLinkを作り、各モーダルにそれぞれ別のページへ遷移できるボタンを作りたいです。

発生している問題・試したこと

const itemList = [
{
id: 'buttongame',
name: 'Button Game',
image: '',
introduction: '',
},

のところに同じように管理したくてLinkを生成しても上手く持ってくることができません。
言葉足らずかもせれませんが、コメントいただけると幸いです。

該当のソースコード

Main
1import React from 'react';
2import Item from './Item';
3//今はreact-router-domを書いていないです
4
5class Main extends React.Component {
6  render() {
7    const itemList = [
8      {
9        id: 'buttongame',
10        name: 'Button Game',
11        image: '',
12        introduction: '',
13      },
14      {
15        id: 'quizgame',
16        name: 'Quiz Game',
17        image: '',
18        introduction: '',
19      },
20      {
21        id: 'slotgame',
22        name: 'Slot Machine',
23        image: '',
24        introduction: '',
25      },
26      {
27        id: 'typegame',
28        name: 'Typing Game',
29        image: '',
30        introduction: '',
31      },
32    ];
33
34    return (
35      <div id="about-section" className='main-wrapper'>
36        <div className='main'>
37          <div className='copy-container'>
38            <h1>Hello, World.</h1>
39          </div>
40          <div className='item-container'>
41            <h3 id="gemes-section">aaa</h3>
42            {itemList.map((itemList) => {
43              return (
44                <Item
45                  id={itemList.id}
46                  name={itemList.name}
47                  image={itemList.image}
48                  introduction={itemList.introduction}
49                />
50              );
51            })}
52          </div>
53        </div>
54      </div>
55    );
56  }
57}
58
59export default Main;

Item
1import React from 'react';
2import { BrowserRouter as Router,
3  Route,
4  Link,
5  Switch } from 'react-router-dom';//今は何も記述してないです
6
7class Item extends React.Component {
8  constructor(props) {
9    super(props);
10    this.state = {isModalOpen: false};
11  }
12
13  handleClickItem() {
14    this.setState({isModalOpen: true});
15  }
16
17  handleClickClose() {
18    this.setState({isModalOpen: false});
19  }
20
21  render() {
22    let modal;
23    if (this.state.isModalOpen) {
24      modal = (
25        <div className='modal'>
26          <div className='modal-inner'>
27            <div className='modal-header'></div>
28            <div className='modal-introduction'>
29              <h2>{this.props.name}</h2>
30              <p>{this.props.introduction}</p>
31
32　　　　　　　　　//この辺りにLinkを貼りたい
33            </div>
34            <button
35              className='modal-close-btn'
36              onClick={() => this.handleClickClose()}
37            >
38              とじる
39            </button>
40          </div>
41        </div>
42      );
43    }
44
45    return (
46      <div className='card'>
47        <div
48          className='item'
49          onClick={() => {this.handleClickItem()}}
50        >
51          <p>{this.props.name}</p>
52          <img src={this.props.image} />
53        </div>
54        {modal}
55      </div>
56    );
57  }
58}
59
60export default Item;