时间戳

首页 > 解决方案 > 使用 React-Bootstrap 中的 Nav.Link 时如何避免重新加载整个应用程序？

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

问题描述

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

标签： reactjsreact-routerreact-bootstrap

解决方案

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

所以如果你试试这个

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

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

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

推荐阅读