初めに
前回はJavaScriptで作成した、APIに関して記載しました。(備忘録)
今回は、ルーティングに関して書いていこうと思います。
概要
上記のように
・タイトル(ヘッダー)
・ブログ投稿記事(メイン)
→下記の様に投稿用のボタンをクリックすると、白背景のみレンダリングされる仕様
実装
Route.js
<Router>
<Title /> {/* Titleコンポーネントを固定する */}
<Routes> {/* ルーティングを定義 */}
<Route exact path="/" element={<BlogList />} /> {/* /パスにアクセスした場合はBlogListコンポーネントを表示 */}
<Route path="/post" element={<Post />} />{/* /postパスにアクセスした場合はPostコンポーネントを表示 */}
<Route path="/revise/:postId" element={<Revise />} />{/* /reviseパスにアクセスした場合はReviseコンポーネントを表示 */}
<Route path="/delete" element={<Delete />} />{/* /deleteパスにアクセスした場合はDeleteコンポーネントを表示 */}
<Route path="/user" element={<User />} />{/* /userパスにアクセスした場合はUserコンポーネントを表示 */}
</Routes>
</Router>
・pathを指定して、URLが更新される様に実装。
・各パスに対してレンダリングされる、コンポーネントを指定
やってみて
実装してみて、最初上手くレンダリングがされませんでした。path指定の際にAPIのエンドポイントど一緒にしていなかったのが原因でした。Rubyでのルーティングは経験ありましたが、JSでのルーティングは初めてでした。構造はシンプルなので記述はしやすいなとおもいました。
最後に
今後も新しい事に挑戦して、実装していきたいと思います！
こんな記事みたいなどあれば教えて頂きいです。よろしくお願いします。