【React】useHistoryでURLは変わるのに画面が変わらない時

環境

• React 18.3.1
• Typescript 4.9.5
• Chakra UI 2.8.0
• react-router-dom 5.2.0

事象

ログイン画面のボタンを押してトップ画面へ遷移する機能を作成
ログイン画面のボタンを押すとブラウザのURL欄はトップ画面のURLに変わっているが、画面はログイン画面のまま

原因

index.tsxでReact.StrictModeを使っているため

ソースコード（一部省略）

index.tsx

import React from 'react';

const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
);
root.render(
    <React.StrictMode> /* これが原因 */
        <ChakraProvider theme={theme}>
            <BrowserRouter>
                <Router />
            </BrowserRouter>
        </ChakraProvider>
    </React.StrictMode>
);

Strict Mode enables the following development-only behaviors:

Your components will re-render an extra time to find bugs caused by impure rendering.
Your components will re-run Effects an extra time to find bugs caused by missing Effect cleanup.
?Your components will be checked for usage of deprecated APIs.

要約するとバグを検知するために再レンダリングする・・・①
エフェクトを再実行する・・・②
非推奨のAPIがないかチェックする

おそらく上記の①または②に該当したため事象が起こったと推測されます。

対応

React.StrictModeを削除

ソースコード（一部省略）

index.tsx

import React from 'react';

const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
);
root.render(
    <ChakraProvider theme={theme}>
        <BrowserRouter>
            <Router />
        </BrowserRouter>
    </ChakraProvider>
);

参考

→同様の事象であったため原因は異なった

→React.StrictModeはcreate-react-appで環境構築した際にデフォルトで使用されている
これの役割やどういう挙動をするコンポーネントなのか理解することに役立った