react-boostrap and react-router causing full page reload - reactjs

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).
You need to change it to <Nav.Link as={Link} to="/"> instead of <Nav.Link href="/"> to fix the same where Link is from react-router-dom