如何为React组件添加跳转至Home路由的链接？

要实现点击StoreItem跳转到Home路由（路径/），你需要使用react-router-dom提供的Link组件，具体操作如下：

步骤1：在Store组件中导入Link #

在Store页面的导入部分，添加Link的导入语句：

import {Row, Col} from 'react-bootstrap'
import {StoreItem} from '../components/StoreItem'
import { Link } from 'react-router-dom' // 新增这行
import storeItems from '../data/items.json'

步骤2：用Link包裹StoreItem组件 #

在map循环的<Col>内部，将StoreItem用Link组件包裹，并通过to属性指定Home路由的路径/：

{storeItems.map(item => (
    <Col key={item.id}>
        <Link to="/">
            <StoreItem {...item}/>
        </Link>
    </Col>    
))}

完整修改后的Store组件代码 #

import {Row, Col} from 'react-bootstrap'
import {StoreItem} from '../components/StoreItem'
import { Link } from 'react-router-dom'
import storeItems from '../data/items.json'


export function Store(){
    return (
        <>
            <h1>Store</h1>
            <Row xs={1} md={2} lg={3} className='g-3'>
                {storeItems.map(item => (
                    <Col key={item.id}>
                        <Link to="/">
                            <StoreItem {...item}/>
                        </Link>
                    </Col>    
                ))}
            </Row>
        </>
    )
}

补充说明 #

• 你的项目已经使用react-router-dom v6（从App组件的Routes和Route用法可判断），直接使用Link组件即可，无需额外配置路由规则。
• 若想去除Link默认的下划线样式，可结合Bootstrap的样式类调整，比如<Link to="/" className="text-decoration-none">。

内容的提问来源于stack exchange，提问作者Michael Xia