Search code examples
reactjsreach-routerreact-bootstrap-nav

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

Solution

  • 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.