React路由Bug：使用Bootstrap Nav.Link后/postcomment链接失效求助

问题根源 #

Bootstrap的Nav.Link和NavDropdown.Item默认渲染为原生<a>标签，点击时会触发浏览器的默认页面跳转行为（刷新整个页面），而React Router的NavLink是专门封装的路由组件，会自动拦截默认跳转，通过客户端路由实现无刷新页面切换。直接混用Bootstrap原生导航组件和React Router时，没有处理这个默认行为，导致路由无法正常工作。

两种可行修复方案 #

方案一：手动拦截默认行为+useNavigate跳转 #

导入React Router的useNavigate钩子，给Bootstrap导航元素添加点击事件，阻止默认跳转并手动触发客户端路由：

import { useNavigate } from 'react-router-dom';
import { Nav, NavDropdown } from 'react-bootstrap';

function NavigationBar() {
  const navigate = useNavigate();

  const handleRouteJump = (e, targetPath) => {
    e.preventDefault(); // 阻止<a>标签的默认刷新行为
    navigate(targetPath); // 触发React Router的客户端跳转
  };

  return (
    <Nav>
      <Nav.Link 
        href="/postcomment" 
        onClick={(e) => handleRouteJump(e, '/postcomment')}
      >
        发布评论
      </Nav.Link>
      <NavDropdown title="更多功能">
        <NavDropdown.Item 
          href="/postcomment" 
          onClick={(e) => handleRouteJump(e, '/postcomment')}
        >
          发布评论
        </NavDropdown.Item>
      </NavDropdown>
    </Nav>
  );
}

方案二：用React Router的Link组件替换Bootstrap的底层渲染 #

利用Bootstrap组件的as属性，指定用React Router的Link来渲染导航元素，让Bootstrap组件继承Link的路由拦截能力：

import { Link } from 'react-router-dom';
import { Nav, NavDropdown } from 'react-bootstrap';

function NavigationBar() {
  return (
    <Nav>
      {/* 给Nav.Link指定as为Link，用to属性设置路由路径 */}
      <Nav.Link as={Link} to="/postcomment">发布评论</Nav.Link>
      <NavDropdown title="更多功能">
        {/* NavDropdown.Item同样可以用as属性绑定Link */}
        <NavDropdown.Item as={Link} to="/postcomment">发布评论</NavDropdown.Item>
      </NavDropdown>
    </Nav>
  );
}

验证要点 #

修复后测试时注意：

• 点击链接后浏览器地址栏是否正确显示/postcomment
• 页面是否无刷新加载对应路由组件
• 浏览器控制台是否有报错（如果有，检查路由配置是否正确）

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