React-bootstrap Navbar导致父组件状态重置问题求助

问题根源 #

React-bootstrap的Navbar组件默认用原生<a>标签实现导航，点击时会触发整页刷新，导致App组件及所有子组件重新挂载，状态自然被重置。而react-router-dom的Link组件基于单页路由机制，仅更新页面局部内容，不会触发全量刷新，因此状态能正常保留。

解决方法 #

把React-bootstrap导航组件的底层渲染替换为react-router-dom的Link即可，具体操作如下：

1. 同时导入所需组件：

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

2. 在Nav.Link和Navbar.Brand上通过as属性指定使用Link组件，用to属性设置路由路径：

<Navbar bg="light" expand="lg">
  <Navbar.Brand as={Link} to="/">首页</Navbar.Brand>
  <Navbar.Toggle aria-controls="basic-navbar-nav" />
  <Navbar.Collapse id="basic-navbar-nav">
    <Nav className="me-auto">
      <Nav.Link as={Link} to="/about">关于我们</Nav.Link>
      <Nav.Link as={Link} to="/contact">联系我们</Nav.Link>
    </Nav>
  </Navbar.Collapse>
</Navbar>

3. 验证效果：此时点击导航项会通过单页路由跳转，不会触发整页刷新，App组件的状态也不会被重置。

额外注意点 #

• 不要给Nav.Link手动添加href属性，否则会覆盖as={Link}的行为，再次触发页面刷新。
• 其他React-bootstrap导航组件（如Nav.Item）也可通过as属性指定为Link，实现无刷新跳转。

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