Reach-Router 和 React-Bootstrap Navbar

Question

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

添加 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 吗？

谢谢，马库斯

Answer 1

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

Answer 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>
  );
}

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

Reach-Router 和 React-Bootstrap Navbar

Reach-Router and React-Bootstrap Navbar

reactjs

reach-router

react-bootstrap-nav