はじめに

ReactでSPAをやろうと思っていろんな例をなぞっているのですが、なかなか動かない。ローカルで動いてもcodepenで動かない。やっと動いたので載せて置きます。テンプレート用。

元記事と言うか参考にしたサイト:
React Router v6 はじめでもわかるルーティングの設定方法の基礎
【最新バージョン対応】React Routerの使い方を解説
など。

実行例 1

reactとreact-domとreact-router-domが必要でバージョンにズレがあると動かない。

このcodepenの例ではcodepenサイトが用意してくれているskypackと言うcdnを使うことによって解決しました。

SPAはsingle page applicationでcodepenとかでページ遷移のあるサイトを作る時には必須だと思う。

ReduxとかNext.jsとかを使えばもっと簡単なのかもしれない。

Routeでpathを定義してLinkで飛ぶ。最初のページをどうするのかがまだわからない。実行例 1 では最初のページには飛び先のリストを表示して、実行例 2 ではページを指定しなかったり無いページを指定した場合ホームを表示すると言う結果になっている。後者が良いのではないか。