Reach-Router 和 React-Bootstrap 导航栏答案

【问题标题】：Reach-Router and React-Bootstrap NavbarReach-Router 和 React-Bootstrap 导航栏
【发布时间】：2021-03-08 17:59:14
【问题描述】：

我尝试将这些东西放在一起，但没有正确地工作。

添加React-Bootstrap Navbar 会得到一个漂亮的视图，但如果我按下按钮，视图会重新渲染。

const App = () => {

    const riskManagementId = "1";

    return (
        <div>
            <Navbar bg="light" expand="lg">
                <Navbar.Toggle aria-controls="basic-navbar-nav"/>
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="mr-auto">
                        <Nav.Link href="/">Home</Nav.Link>
                        <Nav.Link href={`/riskManagements/{riskManagementId}/sell-recommendations`}>Sell</Nav.Link>
                        <Nav.Link href={`/riskManagements/{riskManagementId}/purchase-recommendations`}>Purchase</Nav.Link>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
            <Router>
                <RiskManagement path="/" riskManagementId={riskManagementId}/>
                <SaleRecommendations path="riskManagements/:riskManagementId/sell-recommendations"/>
                <PurchaseRecommendations path="riskManagements/:riskManagementId/purchase-recommendations"/>
            </Router>
        </div>
    );
};

ReactDOM.render(<App/>, document.getElementById("root"));

按下导航按钮之一总是会在短时间内显示“未呈现”文本，直到加载正确的一侧。

<body>
<div id="root">not rendered</div>
<script src="./../../js/App.js"></script>
</body>

这很烦人。我预计单个应用程序页面会保持在前台。

有人知道如何避免 App.js 的重新渲染吗？

谢谢，马库斯

【问题讨论】：

标签： reactjs reach-router react-bootstrap-nav

【解决方案1】：

如果我理解正确的话... <Nav.Link> </Nav.Link> 基本上是带有 href 属性的普通链接。因此，当您单击它时，它会将您带到 ex 的主页。但它会重新呈现整个应用程序。 Mybe 尝试从 react-router-dom 导入 Link 组件。默认情况下，它会自动阻止该行为。这是简短的文档https://reactrouter.com/web/api/Link。

【讨论】：

【解决方案2】：

我觉得这个问题很常见，但缺少一个简单的例子来结合reach-router的功能和react-bootstrap的风格。这是一个可以复制和扩展的示例。（一个不错的替代方案是reach-router-bootstrap LinkContainer，但repo 似乎无效）

import React from "react";
import { Navbar, Nav, Container } from "react-bootstrap";
import { Link } from "@reach/router"

export function NavigationHeader() {
  return (
    <Navbar bg="dark" variant="dark">
      <Container>
        <Navbar.Brand as={Link} to="/">Title</Navbar.Brand>
        <Nav className="me-auto">
          <Nav.Link as={Link} to="/page-1">Page 1</Nav.Link>
          <Nav.Link as={Link} to="/page-2">Page 2</Nav.Link>
        </Nav>
      </Container>
    </Navbar>
  );
}

这种方法可能有一些我不知道的注意事项，但它既简单又实用。

【讨论】：

这看起来很简单。你了解它的工作原理吗？