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

Question

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

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

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

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

  <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”时，引用有效，但整个网络应用程序重新加载——这不是我真正想要的。我怎样才能解决这个问题？提前致谢！

Answer 1

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

所以如果你试试这个

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

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

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

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

How to avoid reloading the entire app when using Nav.Link from React-Bootstrap?

reactjs

react-bootstrap

react-router