CODEWITHSUNDEEP
reactjsreach-routerreact-bootstrap-nav
BB-8
BB-8

Reputation: 45

Reach-Router and React-Bootstrap Navbar

I try to put the things together but don't get it correct to work.

Adding the React-Bootstrap Navbar leads to a nice view but if I press the button the view is re-rendered.

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"));

Navigation bar

Pressing one of the buttons for navigation shows always the "not rendered" text for a short time until the correct side will be loaded.

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

This is annoying. I was expected that the Single Application Page stays in foreground.

Has anybody an idea how I can avoid the re-render of the App.js?

Thanks, Markus

Upvotes: 0

Views: 441

Answers (2)

loaner9
loaner9

Reputation: 342

I feel this problem is common enough but lacks a simple example that marries the functionality of reach-router and the style of react-bootstrap. Here is such an example that can be copied and expanded on. (A nice alternative would be a reach-router-bootstrap LinkContainer but the repo for that seems inactive)

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

This method may have caveats that I'm unaware of, but it's simple and functional.

Upvotes: 1

Chaka15
Chaka15

Reputation: 1371

If I understood you correctly... <Nav.Link> </Nav.Link> is basically normal link with href attribute. So when you click it, it leads you to the home page for ex. but it rerenders whole app. Mybe try importing Link component from react-router-dom. By default it automatically prevents that behavior. Here is short documentation https://reactrouter.com/web/api/Link.

Upvotes: 1

Related Questions