女性向けエンジニアスクール
URLが変わらない代償
いまの fleama は、画面を切り替えても URL がずっと同じままです。
いまの状態起きること
画面を切り替えても URL が変わらない
気に入った商品を人に教えられない
戻るボタンを押す
アプリごと閉じてしまう
開き直す
必ず最初の画面に戻る
画面と URL が結び付いていないのが原因です。
1 / 5
React Router、Routes・Route・Link、URLパラメータ、検索条件、404、見た目と機能の分離、合成、機能別フォルダを扱う全18レッスンのアプリ設計コースです。fleamaを商品一覧・詳細・出品・カート・マイページを持つ複数ページSPAとして完成させます。
レッスン
18件
所要時間
約5時間
ランク
中級
学習環境
ブラウザ完結
fleamaを複数ページSPAへ拡張し、画面と機能を保守しやすい構成へ整理する
React Router、Routes・Route・Link、URLパラメータ、検索条件、404、見た目と機能の分離、合成、機能別フォルダを扱う全18レッスンのアプリ設計コースです。fleamaを商品一覧・詳細・出品・カート・マイページを持つ複数ページSPAとして完成させます。
React Routerで複数ページと404を構成できる
URLパラメータと検索条件をアプリ状態へ接続できる
見た目・機能・フォルダを責務ごとに整理できる
ブラウザ完結（インストール不要）
テキストでの解説
0
レッスン
コーディングの問題
16
レッスン
クイズ問題
2
レッスン
ゆめさくコード編集部
プログラミング学習をもっと身近に。初心者から実務レベルまで、わかりやすいコンテンツをお届けします。
ゆめさくエンジニア / 現役ソフトウェアエンジニア。Ruby on Rails・Nuxt.js・Next.js・CakePHPなどの実務の開発をベースに、学習コンテンツを作成しています。
レッスンの最初に、図と短い言葉で学ぶ内容をつかみます。
いまの fleama は、画面を切り替えても URL がずっと同じままです。
画面を切り替えても URL が変わらない
気に入った商品を人に教えられない
戻るボタンを押す
アプリごと閉じてしまう
開き直す
必ず最初の画面に戻る
画面と URL が結び付いていないのが原因です。
1 / 5
ページを増やすというのは、この対応表に行を足すことです。
path="/items"新しい行1 / 5
利用者が押して移る場面と、処理が終わって移す場面は書き方が違います。
div の onClick
<div
onClick={() => navigate("/items")}
>
商品一覧
</div>Link
<Link to="/items">
商品一覧
</Link>右は a タグとして出るので、右クリックや新しいタブでも開けます。
1 / 5
出品されるたびに Route を1行足す、というわけにはいきません。
商品ごとに書く
<Route path="/items/1" ... />
<Route path="/items/2" ... />
<Route path="/items/3" ... />1本のRoute
<Route
path="/items/:id"
element={<ItemDetail />}
/>右の1行で、どの id が来ても同じ部品が受け取ります。
1 / 5
動かしながら、仕組みや変化を目で確かめられます。
陽葵「注文ウィジェット、今風にできる?」
1問目は無料で解けます。
教材を見ないで、依頼と完成条件だけを読んで書いてみてください。
React道場 ハレノヒ珈琲をモダン化する10問
このコースを終えたあとに進むと、無理なく続けられます
同時に進めると、理解が早くなる組み合わせです
