React Router v5 - Clicking <Link /> is not re-rendering - reactjs

Question

As I understand, clicking on React Router's <Link /> component should cause everything inside <Router /> to re-render.
However, it seems like that is not the case in this simple example app using React Router DOM v5.2:
import React from "react";
import "./styles.css";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const Foo = () => {
console.log("rendered");
return null;
};
export default function App() {
return (
<Router>
<Foo />
<div className="App">
<Link to="/">Home</Link>
<br />
<Link to="/foo">Foo</Link>
<Route path="/" exact>
<p>Home</p>
</Route>
<Route path="/foo">
<p>Foo</p>
</Route>
</div>
</Router>
);
}
https://codesandbox.io/s/vigorous-water-2fuxt?file=/src/App.js
What am I missing?

Answer 1

If you actually render Foo on a route with path then it rerenders when that path is matched. A route without a path will always match and be rendered, so it is rendered when it mounts and doesn't rerender since it has no props nor any state to update (it would if the component containing the Router remounts/updates).
Renders once per render of Router
<Route>
<Foo />
</Route>
Rerenders once per path match
<Route path="/foo">
<Foo />
</Route>
Consider this demo
const Foo = () => {
console.log("rendered Foo");
return null;
};
const Bar = () => {
console.log("rendered Bar");
return null;
};
export default function App() {
const [c, setC] = useState(0);
return (
<Router>
<Route>
<Foo />
</Route>
<button onClick={() => setC(c => c + 1)}>Rerender Router</button>
<div className="App">
<Link to="/">Home</Link>
<br />
<Link to="/bar">Bar</Link>
<Route path="/" exact>
<p>Home</p>
</Route>
<Route path="/bar">
<Bar />
</Route>
</div>
</Router>
);
}

Answer 2

As I understand, clicking on React Router's <Link /> component should cause everything inside <Router /> to re-render.
not <Router /> but <Route /> only if the specified path matches the current path.
the children of <Router /> will only be rendered once.