<aside> 🌿 前回に続いて、商品情報登録ページの ・サイズ、数量の設定 の実装を行う

</aside>

■目次

1. 編集用ページを作成する

1-1. 編集ページ用のURLとRouterを設定する

1-1-0. ルーティングで正規表現を使う　※React Router v5以前の場合

<aside> ⚠️ React Router v6以降では、正規表現は使えなくなった 従って、以下の書き方ではエラーになるので注意！　v6の場合の書き方を画像下に記述したので、そちらを参考にすること

</aside>

https://www.youtube.com/watch?v=tHox104UoOo&list=PLX8Rsrpnn3IWavNOj3n4Vypzwb3q1RXhr&index=16

▼v6の書き方

/**
* 先頭の/も必要なくなった
* :idが変数扱いなのは変わらず
* exactは廃止、pathが完全一致したものだけを表示する仕様になった
*/

<Route path="product" element={<ProductList />} />
<Route path="product/:id" element={<ProductDetail />} />
<Route path="product/edit" element={<ProducEdit />} />
<Route path="product/edit/:id" element={<ProducEdit />} />

1-1-1. 作成手順

1. Router.jsxを開き、product/edit/:id をpathとするRouteコンポーネントを追加する

   編集ページもProductEditコンポーネントを使うので、elementにはそれをセットする

   ▼コード例

   import React from "react";
   import { Route, Routes } from "react-router-dom";
   import { Home, ProductEdit, Reset, SignIn, SignUp, Test } from "./templates";
   import Auth from "./Auth";
   
   const Router = () => {
     return (
       <Routes>
         <Route path="signup" element={<SignUp />} />
         <Route path="signin" element={<SignIn />} />
         <Route path="signin/reset" element={<Reset />} />
   
         <Route path="/" element={<Auth />}>
           <Route index element={<Home />} />
           <Route path="product/edit" element={<ProductEdit />} />
           **<Route path="product/edit/:id" element={<ProductEdit />} />**
           <Route path="test" element={<Test />} />
         </Route>
       </Routes>
     );
   };
   
   export default Router;
   

1-2. useEffect内で既存データを取得してsetする　firestoreメソッド使用

1-2-1. コード解説

<aside> ⚠️ firestoreメソッドの書き方が、以下画像ではv8なので注意！ 下にv9の書き方を記載するので、そちらを参考にすること！

</aside>

https://www.youtube.com/watch?v=tHox104UoOo&list=PLX8Rsrpnn3IWavNOj3n4Vypzwb3q1RXhr&index=16

▼v9の書き方

import { doc, getDoc } from "firebase/firestore";
import { db } from "../../firebase/index";
import { useEffect } from "react";

let id = window.location.pathname.split("/product/edit")[1];
if(id !== "") {
		id = id.split("/")[1];
}

useEffect(() => {
		if(id !== "") {
				**getDoc(doc(db, "products", id)).then((snapshot) => {**
						const product = snapshot.data();
						setName(product.name);
						// 省略
				})
		}
}, [id]);

• split()は、()内で指定した箇所で文字列を区切り、配列で返してくれるメソッド

  今回の場合は、URLを/product/edit で区切って、[/product/edit, /id]の配列で返してくれる で、ほしいのはidの部分だけなので、[1] でid部分を指定している

  <aside> 🌿 【なぜ、最初のsplit()の時点で、id前の/も区切り箇所に含めなかったのか】 新規作成の場合、URLは/product/edit で終わっているから。

  </aside>

1-2-2. 作成手順