React中点击链接时如何强制关闭Bootstrap Offcanvas导航栏？

要解决这个问题，核心是手动控制Offcanvas的显示状态，在点击导航链接或路由切换时主动关闭它，具体可以按以下两种方法修改代码：

方法一：给导航链接添加点击事件，点击时关闭侧边栏 #

1. 导入useState钩子管理侧边栏的展开状态
2. 用状态变量控制Navbar.Offcanvas的显示与隐藏
3. 给每个导航链接添加点击事件，触发时关闭侧边栏

修改后的完整代码：

import { useState } from 'react';
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import { LinkContainer } from 'react-router-bootstrap';
import Offcanvas from 'react-bootstrap/Offcanvas';

function OffcanvasNav() {
  // 管理侧边栏展开状态，初始为关闭
  const [isOffcanvasOpen, setIsOffcanvasOpen] = useState(false);

  // 切换侧边栏状态
  const toggleOffcanvas = () => setIsOffcanvasOpen(!isOffcanvasOpen);
  // 关闭侧边栏
  const closeOffcanvas = () => setIsOffcanvasOpen(false);

  return (
    <>
      <Navbar bg='light' expand={false} className='mb-3'>
        <Container fluid>
          <Navbar.Brand to='/'>Denver Judo</Navbar.Brand>
          {/* 汉堡按钮点击时切换侧边栏 */}
          <Navbar.Toggle 
            aria-controls="offcanvasNavbar"
            onClick={toggleOffcanvas}
          />
          <Navbar.Offcanvas
            id="offcanvasNavbar"
            aria-labelledby="offcanvasNavbarLabel"
            placement='end'
            // 用状态控制显示
            show={isOffcanvasOpen}
            // 点击关闭按钮/外部时关闭
            onHide={closeOffcanvas}
          >
            <Offcanvas.Header closeButton>
              <Offcanvas.Title id="offcanvasNavbarLabel">
                Denver Judo
              </Offcanvas.Title>
            </Offcanvas.Header>
            <Offcanvas.Body>
              <Nav className='justify-content-end flex-grow-1 pe-3'>
                <LinkContainer to='/'>
                  {/* 点击链接时关闭侧边栏 */}
                  <Nav.Link onClick={closeOffcanvas}>Home</Nav.Link>
                </LinkContainer>
                <LinkContainer to='/schedule'>
                  <Nav.Link onClick={closeOffcanvas}>Schedule</Nav.Link>
                </LinkContainer>
                <LinkContainer to='/about'>
                  <Nav.Link onClick={closeOffcanvas}>About</Nav.Link>
                </LinkContainer>
              </Nav>
            </Offcanvas.Body>
          </Navbar.Offcanvas>
        </Container>
      </Navbar>
    </>
  );
}

export default OffcanvasNav;

方法二：监听路由变化自动关闭侧边栏 #

如果应用路由切换频繁，不想给每个链接单独加事件，可以监听路由变化，自动关闭侧边栏：

1. 导入useLocation和useEffect钩子
2. 监听路由路径变化，一旦路由改变就关闭侧边栏

在方法一的基础上添加以下代码片段：

import { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
// ...其他导入保持不变

function OffcanvasNav() {
  const [isOffcanvasOpen, setIsOffcanvasOpen] = useState(false);
  const location = useLocation();

  const toggleOffcanvas = () => setIsOffcanvasOpen(!isOffcanvasOpen);
  const closeOffcanvas = () => setIsOffcanvasOpen(false);

  // 路由变化时自动关闭侧边栏
  useEffect(() => {
    closeOffcanvas();
  }, [location.pathname]);

  // ...其余组件代码和方法一一致
}

补充说明 #

• 原代码中[false].map的写法无实际意义，直接渲染单个Navbar即可
• 通过useState控制show属性，能完全掌握侧边栏的显示状态
• 两种方法二选一即可：方法一更直接，方法二更适合路由频繁切换的场景

内容的提问来源于stack exchange，提问作者Stephen Scott Moore