Javascript TypeError:无法读取属性'；项目'；未定义React.js的

我正在React.js中开发一个电子商务网站，我在Chrome中遇到了“TypeError:无法读取未定义属性'Item'。这里还有一个错误截图和VS代码，与发生错误的代码相同。 请帮忙！我将非常感激！：）

在这里您可以看到代码和错误

import React from 'react'
import { Link } from 'react-router-dom'
import { Row, Col, Image, ListGroup, Card, Button } from 'react-router-bootstrap'
import Rating from '../components/Rating'
import products from '../products'


const ProductScreen = ({ match }) => {
    const product = products.find((p) => p._id === match.params.id)

  return (
    <>
        <Link className='btn btn-light my-3' to='/'>
            Go Back
        </Link>
        <Row>
            <Col md={6}>
                <Image src={product.image} alt={product.name} fluid />
            </Col>
            <Col md={3}>
                <ListGroup variant='flush'>
                    <ListGroup.Item>
                        <h3>{product.name}</h3>
                    </ListGroup.Item>
                    <ListGroup.Item>
                        <Rating value={product.rating} text ={`${product.numReviews} reviews`} />
                    </ListGroup.Item>
                </ListGroup>
            </Col>
        </Row>
    </>
    )    
}

export default ProductScreen

从“React”导入React
从“react router dom”导入{Link}
从“react router bootstrap”导入{行、列、图像、列表组、卡、按钮}
从“../components/Rating”导入评级
从“../products”导入产品
const ProductScreen=（{match}）=>{
const product=products.find（（p）=>p.u id==match.params.id）
返回(
回去
{product.name}
)    
}
导出默认产品屏幕

根据

react路由器引导文件：

它是React路由器v4和React引导程序之间的集成，将React引导程序元素包装在
中

因此，只需从
react-router-bootstrap
导入
，对于另一个组件，如
List
和
按钮
从
react-bootstrap
包导入它们，然后根据需要进行安装

我个人认为没有理由使用
react-router-bootstrap
包。
根据
react-router-bootstrap
文档：

它是React路由器v4和React引导程序之间的集成，将React引导程序元素包装在
中

因此，只需从
react-router-bootstrap
导入
，对于另一个组件，如
List
和
按钮
从
react-bootstrap
包导入它们，然后根据需要进行安装

就我个人而言，我认为没有理由使用react路由器引导包。
更改

import { Row, Col, Image, ListGroup, Card, Button } from 'react-router-bootstrap'

到

然后错误就消失了

使用react router bootstrap可以更改：

<Link className='btn btn-light my-3' to='/'>
  Go Back
</Link>


回去

到


回去

LinkContainer是从react路由器引导导入的
更改

import { Row, Col, Image, ListGroup, Card, Button } from 'react-router-bootstrap'

到

然后错误就消失了

使用react router bootstrap可以更改：

<Link className='btn btn-light my-3' to='/'>
  Go Back
</Link>


回去

到


回去

LinkContainer是从react路由器引导程序导入的
是否安装了
react路由器引导程序
？是否安装了
react路由器引导程序
？