如何使用图片替换React Bootstrap中Navbar.brand实现点击跳转首页功能

你直接给原生<img>标签添加react-bootstrap专属的as属性是无效的，as属性仅支持react-bootstrap封装的UI组件（如Navbar.Brand、Nav.Link等），所以点击跳转逻辑没有生效。

使用Navbar.Brand组件承载跳转逻辑，将Logo图片作为它的子元素插入即可，具体修改如下：

import {Navbar, Nav} from 'react-bootstrap'
import {Link} from 'react-router-dom'
import '../CSS/Header.css'

const Header = () => {
    return (
        <Navbar className="MainHeader" expand="lg" variant="dark">
            {/* 用Navbar.Brand处理跳转，内部放logo图片 */}
            <Navbar.Brand as={Link} to="/">
                <img 
                    src="/Images/Fblogo.png" 
                    alt="Facebook"
                    style={{height: '40px'}} // 可按需调整尺寸适配导航栏
                />
            </Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse className="Headerlist justify-content-end">
                <Nav>
                    <Nav.Link as={Link} to="/Facilities">Facilities</Nav.Link>
                    <Nav.Link as={Link} to="/Room">Room</Nav.Link>
                    <Nav.Link as={Link} to="/Events">Events</Nav.Link>
                    <Nav.Link as={Link} to="/Contactus">Contact Us</Nav.Link>
                    <Nav.Link as={Link} to="/Booknow">Book Now</Nav.Link>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    )
}

export default Header

• 原来代码里多余的空标签<> </>可以直接删除，Navbar组件本身即可直接容纳内部子元素
• 可以给img标签添加自定义宽高样式，避免Logo尺寸过大撑高导航栏

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