react-routerでURLが変わるがコンポーネントが再描画されない

異なるRouterに属するコンポーネントは再描画されません。

App.ts の中で、以下のようにしているとします。

const App: React.FC = () => {
  return (
    <div className="App">
      <Header />
      <Contents />
    </div>
  );
}

そして、 Header.tsx と Contents.tsx は以下のようだとします。

const Header: React.FC = () => {
  return (
      <Router>
        <div>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </div>
      </Router>  );
}

const Contents: React.FC = () => {
  return (
      <Router>
        <Switch>
          <Route path="/" exact>
            <div>home</div>
          </Route>
          <Route path="/aboutme" exact>
            <div>about me</div>
          </Route>
        </Switch>
      </Router>
  );
}

これでうまくいくんじゃないかな、と思ったものの、URLは変わるが、コンポーネントは変わらない、という現象が起きました。

上記の状態から、 Router を消し、 App.tsx を以下のように変更することで、正しくコンポーネントの再描画が行われました。

どうやら、同じ Router コンテキスト内でルーティングされる、ということがわかりました。

const App: React.FC = () => {
  return (
    <div className="App">
      <Router>
        <Header />
        <Contents />
      </Router>
    </div>
  );
}