はじめに
ReactでSPAをやろうと思っていろんな例をなぞっているのですが、なかなか動かない。ローカルで動いてもcodepenで動かない。やっと動いたので載せて置きます。テンプレート用。
元記事と言うか参考にしたサイト:
React Router v6 はじめでもわかるルーティングの設定方法の基礎
【最新バージョン対応】React Routerの使い方を解説
など。
実行例 1
See the Pen hello-react-router-v6 by kalz2q (@kalz2q) on CodePen.
実行例 2
See the Pen react-router-welcome-home by kalz2q (@kalz2q) on CodePen.
説明
reactとreact-domとreact-router-domが必要でバージョンにズレがあると動かない。
このcodepenの例ではcodepenサイトが用意してくれているskypackと言うcdnを使うことによって解決しました。
SPAはsingle page applicationでcodepenとかでページ遷移のあるサイトを作る時には必須だと思う。
ReduxとかNext.jsとかを使えばもっと簡単なのかもしれない。
Routeでpathを定義してLinkで飛ぶ。最初のページをどうするのかがまだわからない。実行例 1 では最初のページには飛び先のリストを表示して、実行例 2 ではページを指定しなかったり無いページを指定した場合ホームを表示すると言う結果になっている。後者が良いのではないか。