React Router v6.4 のチュートリアルを通してloader, action を使った画面遷移と処理の理解

├── @types/react-dom@18.0.9
├── @types/react@18.0.26
├── @vitejs/plugin-react@3.0.0
├── localforage@1.10.0
├── match-sorter@6.3.1
├── react-dom@18.2.0
├── react-router-dom@6.4.5
├── react@18.2.0
├── sort-by@1.2.0
├── typescript@4.9.4
└── vite@4.0.0

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route
      path="/"
      element={<Root />}
      loader={rootLoader}
      action={rootAction}
      errorElement={<ErrorPage />}
    >
      <Route errorElement={<div>Oops! There was an error2.</div>}>
        <Route index element={<Index />} />
        <Route
          path="contacts/:contactId"
          element={<Contact />}
          loader={contactLoader}
          action={contactAction}
        />
        <Route
          path="contacts/:contactId/edit"
          element={<EditContact />}
          loader={contactLoader}
          action={editAction}
        />
        <Route path="contacts/:contactId/destroy" action={destroyAction} />
      </Route>
    </Route>,
  ),
)

// http://localhost:5173/contacts/jzyrzrl という
// URL で編集画面表示中に保存操作を行った場合の例

// 該当する Route 定義
// path にある動的パラメータ :contanctId が以下の引数の params に入る
<Route
  path="contacts/:contactId"
  element={<Contact />}
  loader={contactLoader}
  action={contactAction}
/>

// request, params は後述の画像のようなデータが渡される。
// request.formData() に画面上で入力した情報を持っている（キーは input 要素の name 属性）
// params は URL パラメータ。以下の画像の contactId は
// ルーティング定義の path="contacts/:contactId の動的マッチングの名前
export async function action({ request, params }) {
  console.log(request) // 出力内容は以下
  console.log(params) // 出力内容は以下
  const formData = await request.formData()
  const firstName = formData.get('first')
  const lastName = formData.get('last')
  const updates = Object.fromEntries(formData)
  await updateContact(params.contactId, updates)
  return redirect(`/contacts/${params.contactId}`)
}

/* Form はデフォルトでは GET
   action は相対パス値を取る。以下の場合は、contact/:id/edit への遷移
   遷移先の action は実行されない。*/
          <Form action="edit">
            <button type="submit">Edit</button>
          </Form>

/* action は相対パス値を取る。contact/:id/destroy
   ここでは POST になっているので、confirm で true の場合は、destroy の action が呼ばれる */
          <Form
            method="post"
            action="destroy"
            onSubmit={(event) => {
              if (!confirm('Please confirm you want to delete this record.')) {
                event.preventDefault()
              }
            }}
          >

/* useSubmit を使うことで任意のイベント時に submit をかけることができる。
   これは const submit = useSubmit() された結果を onChange 内で実行している。
   GET メソッドなので、action は実行されない。
   URL はクエリがついたものに更新される、結果 loader のみ都度実行される）。 */
          <Form id="search-form" role="search">
            <input
              id="q"
              aria-label="Search contacts"
              placeholder="Search"
              type="search"
              name="q"
              defaultValue={q}
              className={searching ? 'loading' : ''}
              onChange={(event) => {
                const isFirstSearch = q == null
                submit(event.currentTarget.form, {
                  replace: !isFirstSearch,
                })
              }}
            />
            <div id="search-spinner" aria-hidden hidden={!searching} />
            <div className="sr-only" aria-live="polite"></div>
          </Form>

/* POST なので、表示中の path に対する action が実行される */
          <Form method="post">
            <button type="submit">New</button>
          </Form>

function Favorite({ contact }: { contact: { favorite: boolean } }) {
  const fetcher = useFetcher()
  let favorite = contact.favorite

  if (fetcher.formData) {
    favorite = fetcher.formData.get('favorite') === 'true'
  }

  return (
/* 
  チュートリアルでは、path="contacts/:contactId" の action を実行する。
  例えば、
    <Route path="contacts/:contactId/favorite" action={contactAction} />
  のような Route を作成し、fetcher.Form の action を "favorite" とすれば、
  上記の URL の action を実行してくれる、かつ画面のURLは変更なし。
 */
    <fetcher.Form method="post">
      {' '}
      <button
        name="favorite"
        value={favorite ? 'false' : 'true'}
        aria-label={favorite ? 'Remove from favorites' : 'Add to favorites'}
      >
        {favorite ? '★' : '☆'}
      </button>
    </fetcher.Form>
  )
}

contacts.map((contact) => (
  <li key={contact.id}>
    {/* 
      className に関数を指定することで状態をもとにcssクラスを適用することができる。
        isActive : 今表示している画面のURLが to のURL
  　　　 isPending: 今表示中の画面のURLが to のURL。表示中だよ、をユーザにフィードバックできる
    */}
    <NavLink
      to={`contacts/${contact.id}`}
      className={({ isActive, isPending }) =>
        isActive ? 'active' : isPending ? 'pending' : ''
      }
    >
      {contact.first || contact.last ? (
        <>
          {contact.first} {contact.last}
        </>
      ) : (
        <i>No Name</i>
      )}{' '}
      {contact.favorite && <span>★</span>}
    </NavLink>
  </li>
))