如何将反应网站重定向到其他带有图像的网站？答案

【问题标题】：How to redirect react website into other website with image?如何将反应网站重定向到其他带有图像的网站？
【发布时间】：2023-03-12 06:15:01
【问题描述】：

大家好，所以我正在尝试使用 react-bootstrap 创建一些网站，当他们点击我页脚上的某个徽标时，我想将我的用户重定向到另一个网站/链接，我该如何在 react 中做到这一点？因为我意识到这个标签只会重定向我们网站的路径。

这是我的代码：

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>
                    <img src="FBLogo.jpg"></img>
                    <img src="IGLogo.jpg"></img>
                </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

【问题讨论】：

标签： html css reactjs react-bootstrap

【解决方案1】：

就像在普通 HTML 中一样，您将使用链接标签包装图像：

<a href="http://www.google.com/"><img src="FBLogo.jpg"/></a>
<a href="http://www.google.com/"><img src="IGLogo.jpg"/></a>

或使用workmap：

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="stack_overflow" href="https://www.google.com/">
</map>

【讨论】：