Next.jsのルーティングイベントの発火の覚書
- 2020/11/08
- React
データ量が多くページ遷移をするときにかなり時間がかかってしまうようなケースが存在する
その場合routerの状態を監視してイベントを付与するのがよい
Next.jsにおいてはルーティング情報がuseRouterなどから取れる
そのためNextのLinkタグを使った遷移をするとイベントを監視することもできる
const router = useRouter();
// ルーティングイベント発生時にイベント発火
router.events?.on('routeChangeStart', () => {});
// ルーティングイベント終了時にイベント発火
router.events?.on('routeChangeComplete', () => {});
// ルーティングイベントのエラー時に発火またはルートのロードがキャンセルされた場合
router.events?.on('routeChangeError', () => {});
- Cannot update a component (component1) while rendering a different component (component2).
- Reactにstorybookをインストールする