目次
環境
- 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を使っているため
ソースコード(一部省略)
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>
);
