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

目次

環境

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

事象

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

スクリーンショット 2024-11-29 12.34.00.png

原因

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

ソースコード(一部省略)

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>
);
目次