0

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

添加React-Bootstrap 导航栏会带来一个漂亮的视图，但如果我按下按钮，视图会重新呈现。

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

谢谢，马库斯

4

2 回答 2

1

我觉得这个问题很常见，但缺少一个简单的例子来结合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>
  );
}

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

于 2021-10-05T15:41:14.660 回答
1

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

于 2021-03-08T21:21:18.500 回答