はじめに
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とかでページ遷移のあるサイトを作る時には必須だと思う。
react-router-domとか使わずにifで分岐させるだけで出来るかもしれない。
ReduxとかNext.jsとかを使えばもっと簡単なのかもしれない。
Routeでpathを定義してLinkで飛ぶ。最初のページをどうするのかがまだわからない。
