React+react-bootstrap项目中点击图片跳转外部站点的实现方法

实现方案 #

站外跳转不需要使用React路由的内部跳转组件，直接用标准HTML <a> 标签包裹目标图片即可实现需求，配置对应属性还能控制打开方式、规避安全风险。

修改后的完整代码如下：

import { Container, Row, Col } from "react-bootstrap"
import '../CSS/Footer.css'

const Footer = () => {
    return (
        <Container fluid={true} className="p-0 footerContainer">
            <Row>
                <Col sm={12} lg={4} className="text-center footerright">
                    <h3>Follow Us</h3>
                    <hr style={{border:'2px solid', color:'#FFFFFF', width:'25.7%', margin: 'auto'}}></hr>
                    {/* 包裹Facebook图标跳转对应站外地址 */}
                    <a href="替换为Facebook站点完整地址" target="_blank" rel="noopener noreferrer">
                        <img src="FBLogo.jpg" alt="Facebook官方账号" />
                    </a>
                    {/* 包裹Instagram图标跳转对应站外地址 */}
                    <a href="替换为Instagram站点完整地址" target="_blank" rel="noopener noreferrer">
                        <img src="IGLogo.jpg" alt="Instagram官方账号" />
                    </a>
                </Col>
            </Row>

            <Row>
                <Col sm={12} lg={12} className="text-center">
                    <hr></hr>
                    <p>Copyright © 2014 <br></br>All Rights Reserved</p>
                </Col>
            </Row>
        </Container>
    )
}

export default Footer

属性说明

• href 填写目标站点的完整地址，必须带http/https前缀，否则会被识别为站内路径
• target="_blank" 配置后点击链接会在新窗口打开，不需要新窗口打开直接删除该属性即可
• rel="noopener noreferrer" 为安全标配，防止新开页面获取原页面权限产生安全风险
• 给<img>补充的alt属性符合网页无障碍规范，可根据实际需求修改内容

内容的提问来源于stack exchange，提问作者Kim San