带路由的条件图像

Question

我有一条回家路线和一条聊天路线。当我进入聊天路线时，我想在导航栏中看到不同的图像

这是代码：

import { Container, Nav, Navbar } from "react-bootstrap";
import logo from "../assets/Logo.png";
    
const Header = () =>{
  return(
    <Navbar bg="dark" variant="dark" expand="lg" className="mx-auto">
      <Container>
        <Navbar.Brand href="/">
          <img src={logo} alt="Home" width={270}/> // This is the image
        </Navbar.Brand>

        <Navbar.Collapse>
          <Nav className="ms-auto">
            <Nav.Link href="/">Home</Nav.Link>
            <Nav.Link href="/chat">Chat</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  )
}
export default Header;

Answer 1

您可以使用

useLocation

中的

react-router-dom

钩子提取当前路线位置。

像这样：

import { useLocation } from 'react-router-dom';

然后：

const location = useLocation();

你的代码将如下所示：

import { useLocation } from 'react-router-dom';
import { Container, Nav, Navbar } from "react-bootstrap";
import logo from "../assets/Logo.png";
    
const Header = () =>{
const location = useLocation();
const currLocation = location.pathname === "/chat"

  return(
    <Navbar bg="dark" variant="dark" expand="lg" className="mx-auto">
      <Container>
        <Navbar.Brand href="/">
          <img src={currLocation ? CHAT_LOGO : logo} alt="Home" width={270}/>
        </Navbar.Brand>

        <Navbar.Collapse>
          <Nav className="ms-auto">
            <Nav.Link href="/">Home</Nav.Link>
            <Nav.Link href="/chat">Chat</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  )
}
export default Header;