React-Bootstrap与React-Router联用导致页面全量重载问题求助

这个情况完全不正常，你猜的没错——问题根源确实是React-Bootstrap的默认Nav.Link组件并没有集成React-Router的客户端路由能力。

为什么会出现全量重载？ #

React-Bootstrap的Nav.Link默认渲染的是原生HTML的<a>标签，当你设置href属性时，点击它会触发浏览器的默认导航行为：向服务器发送请求并重新加载整个页面。而React-Router的Link组件则是通过拦截点击事件、阻止默认行为，再利用客户端路由机制来更新页面内容，实现无刷新跳转。

解决方案：让React-Bootstrap Nav.Link 适配React-Router #

最优雅的解决方式是使用React-Bootstrap提供的as属性，将Nav.Link的底层渲染组件替换为React-Router的Link。这样既能保留Bootstrap的样式，又能享受React-Router的客户端路由优势。

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

在你的组件顶部添加：

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

步骤2：修改Nav.Link的写法

把原来的href替换为to属性，并通过as={Link}指定渲染组件：

<Nav className="mr-auto">
  <Nav.Link as={Link} to="/">Home</Nav.Link>
  <Nav.Link as={Link} to="/about">About</Nav.Link>
  <Nav.Link as={Link} to="/users/1">/users/1</Nav.Link>
  <Nav.Link as={Link} to="/users/2">/users/2</Nav.Link>
  <Nav.Link as={Link} to="/users2/1">/users2/1</Nav.Link>
</Nav>

修改后的完整Navigation组件示例

function Navigation() {
  return (
    <BrowserRouter >
      <div>
        <Navbar bg="light" expand="lg">
          <Navbar.Brand as={Link} to="/">React-Bootstrap</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="mr-auto">
              <Nav.Link as={Link} to="/">Home</Nav.Link>
              <Nav.Link as={Link} to="/about">About</Nav.Link>
              <Nav.Link as={Link} to="/users/1">/users/1</Nav.Link>
              <Nav.Link as={Link} to="/users/2">/users/2</Nav.Link>
              <Nav.Link as={Link} to="/users2/1">/users2/1</Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users/:id" render={() => <Users />}/>
          <Route path="/users2/:id" component={Users2} />
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </BrowserRouter >
  );
}

备选方案：手动阻止默认行为（不推荐） #

如果你不想修改组件类型，也可以通过onClick事件手动阻止默认跳转，再用history.push实现客户端导航，但这种方式代码冗余，不如第一种方法简洁：

<Nav.Link 
  href="/" 
  onClick={(e) => {
    e.preventDefault();
    history.push("/");
  }}
>
  Home
</Nav.Link>

这种方法需要你在组件中获取history对象（比如通过useHistory钩子），所以只适合在函数组件或者已经注入history属性的类组件中使用。

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