React Router Dom 6+Bootstrap Nav Link触发整应用重渲染问题求助

你的问题出在使用了原生href属性，点击时会触发浏览器整页刷新，而非React Router的客户端路由跳转。要实现仅右列内容更新，需改用React Router的客户端导航方式：

步骤1：导入React Router的Link组件 #

在CommonComponent文件顶部添加：

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

步骤2：修改导航链接写法 #

将Nav.Link的href替换为to属性，同时通过as={Link}指定用React Router的Link组件渲染，避免原生页面跳转：

<Nav.Item>
  <Nav.Link as={Link} to="/a">Comp A</Nav.Link>
</Nav.Item>
<Nav.Item>
  <Nav.Link as={Link} to="/b">Comp B</Nav.Link>
</Nav.Item>
<Nav.Item>
  <Nav.Link as={Link} to="/c">Comp C</Nav.Link>
</Nav.Item>
<Nav.Item>
  <Nav.Link as={Link} to="/d">Comp D</Nav.Link>
</Nav.Item>

（若你的Nav来自react-router-bootstrap，可直接使用Nav.Link的to属性，无需额外指定as）

原理说明 #

• 原生href会触发浏览器发起新HTTP请求，导致整个应用重新加载
• 使用React Router的Link组件（或通过as绑定）会在客户端处理路由跳转，仅更新Routes匹配的右列内容，头部和左侧导航保持不变，不会触发整页重渲染

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