react-boostrap and react-router causing full page reload

Question

I am just trying to get React-Boostrap and React-Router up and running together. I used Create React App to create a simple shell.

This is my code, which does actual work nicely with React Router

import React, { Component } from "react";
import { RouteComponentProps, useHistory } from 'react-router';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    useParams,
    BrowserRouter
} from "react-router-dom";

import 'bootstrap/dist/css/bootstrap.min.css';
import {
    Nav,
    Navbar
} from "react-bootstrap";

function Navigation() {
    return (
        <BrowserRouter >
            <div>
                <Navbar bg="light" expand="lg">
                    <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
                    <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="/about">About</Nav.Link>
                            <Nav.Link href="/users/1">/users/1</Nav.Link>
                            <Nav.Link href="/users/2">/users/2</Nav.Link>
                            <Nav.Link href="/users2/1">/users2/1</Nav.Link>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>

                {/* A <Switch> looks through its children <Route>s and
                    renders the first one that matches the current URL. */}
                <Switch>
                    <Route path="/about">
                        <About />
                    </Route>
                    <Route path="/users/:id" render={() => <Users />}/>
                    <Route path="/users2/:id" component={Users2} />
                    <Route path="/">
                        <Home />
                    </Route>
                </Switch>
            </div>
        </BrowserRouter >
    );
}

class AppRouterBootstrap extends Component {
    render() {
        return (
            <div id="App">
                <Navigation />
            </div>
        );
    }
}

export default AppRouterBootstrap;

function Home() {
    return <h2>Home</h2>;
}

function About() {
    return <h2>About</h2>;
}

function Users() {
    // We can use the `useParams` hook here to access
    // the dynamic pieces of the URL.
    let { id } = useParams();
    let history = useHistory();

    const handleClick = () => {
        history.push("/home");
    };

    return (
        <div>
            <h3>ID: {id}</h3>
            <button type="button" onClick={handleClick}>Go home</button>
        </div>
    );
}

class Users2 extends React.Component<RouteComponentProps, any> {

    constructor(props: any) {
        super(props);
    }

    render() {
        return (
            <div>
                <h1>Hello {(this.props.match.params as any).id}!</h1 >
                <button
                    type='button'
                    onClick={() => { this.props.history.push('/users/1') }} >
                    Go to users/1
                </button>
            </div>
        );
    }
}

Which looks like this when rendered. Which looks ok, and actually works (on a navigation, and parameters etc etc point of view just fine)

However what I am noticing is that whenever I click on one of the React-Boostrap nav links, there is a FULL network reload occurring, if I monitor the Network tab. If I do not use React-Boostrap nav, but instead use a simple react-router and some Link from react-router. this full reload is not occurring. It only seems to happen when using React-Boostrap nav links

Does anyone know if this is normal, should React-Boostrap nav when used with React-Router be doing this. I guess its possible since its not using the inbuilt React-Router Link classes, but rather its own Nav based items.

Anyone have any ideas on this one?

Answer 1

The Nav.Link will refresh the pages by default (same functionality as a href).

To avoid this behavior, instead of href, you can pass the props as and to (more details here).

For example:

import { Link } from "react-router-dom";

// ...

<Nav.Link as={Link} to="/about">About</Nav.Link>