使用 React-Bootstrap 中的 Nav.Link 时如何避免重新加载整个应用程序？答案

【问题标题】：How to avoid reloading the entire app when using Nav.Link from React-Bootstrap?使用 React-Bootstrap 中的 Nav.Link 时如何避免重新加载整个应用程序？
【发布时间】：2021-07-06 09:55:06
【问题描述】：

当我使用以下链接时，我的 React 应用程序按预期工作，这意味着如果我单击一个链接，该应用程序不会完全重新加载，而只是改变其前端外观。

<Link to="/about">About</Link>

现在我想使用 React-Bootstrap 的导航栏。但是，如果我单击导航栏，我的整个网络应用程序会重新加载，这是我不想要的。

这是我认为我的代码的相关部分：

  <Router>

<Navbar bg="dark" variant="dark">
  <Navbar.Toggle aria-controls="basic-navbar-nav" />
  <Navbar.Collapse id="basic-navbar-nav">
    <Nav className="mr-auto">
      <Nav.Link to="/about">Page 1</Nav.Link>
      <Nav.Link href="/about2">Page 2</Nav.Link>
    </Nav>
  </Navbar.Collapse>
</Navbar>

<hr />

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/about2">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
         
    </Router>

当我使用“to”时，它甚至根本不起作用。当我使用“href”时，参考有效，但整个网络应用程序重新加载 - 这不是我真正想要的。我怎样才能解决这个问题？提前致谢！

【问题讨论】：

标签： reactjs react-router react-bootstrap

【解决方案1】：

为了让React-router 获取路由更改，您必须使用库附带的Link 组件或以编程方式处理重定向。幸运的是，React-bootstrap 在它的大部分组件中都提供了一个 render prop 来指定如果你不想使用默认值，你想要渲染哪个组件或元素。

所以如果你改用这个

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

<Nav.Link as={Link} to="/about">Page 1</Nav.Link>

您的导航应该可以正常工作。

【讨论】：