React ルーティング

ルーティング

URLに応じて処理を渡す先を変える
SPAではページ遷移もアプリが担う

インストール

npm install react-router-dom

基本

SwitchからRouteになりました。

Routeを入れ子にして階層構造を作る。
子ルートは親ルートのパスに連結して定義される。
親ルートに子ルートの中身を表示するにはOutletを使う
トップに表示する子ルートはpathではなくindexで表す
v6からはexact, endがなくても完全一致になった。

import {
  createBrowserRouter,
  createRoutesFromElements,
  RouterProvider,
  Route,
  NavLink, Link, Outlet,
  useNavigate
} from "react-router-dom";

<Route path="/" element={<App />}>
  <Route index element={<MyTop />} />
  <Route path="hello" element={<MyHello />} />
  <Route path="article/:id" element={<MyArticle />} />
  <Route path="*" element={<NotFound />} />
</Route>
<NavLink className={isCurrent} to="/">

タグ属性の分解代入

isActive属性がある場合に、クラスを追加

function isCurrent(link) {
  // タグから属性にアクセス
  return link.isActive ? "current" : undefined;
}
function isCurrent({ isActive }) {
  // 属性に直接アクセス
  return isActive ? "current" : undefined;
}

リンク

NavLink, Linkタグでリンク作成可能

画面遷移

useNavigateでプログラムから画面遷移が可能
navigate("/");

ルートパラメータ

<Route path="article/:id" element={<MyArticle />} />

useParamsを使う。
const params = useParams()
params.idでアクセス

指定より後ろのパスを取得

<Route path="search/*" element={<MySearch />} />

useParamsを使う。
params["*"]でアクセス

クエリ文字列を取得

<Route path="query" element={<MyQueryArticle />} />

useSearchParamsを使う
params.get("id")でアクセス

エラー時に表示する画面

<Route path="article/:id" errorElement={<MyError />} />

errorElementに指定
const error = useRouteError(); を使う
error.messageでアクセス
共通エラーはルートのAppに定義しても良い

ローダー

コンポーネントで使うデータの準備をするための関数
コンポーネントとデータ取得のコードを分離できる

1.リクエスト情報を受け取る
2.結果をPromiseで返す

データの取得はRouteタグのローダー関数でやってしまい、
useLoaderDataでその戻り値を取得して表示

action

サブミット処理をFormに書かずにRouteのaction属性に記載する

1.引数としてリクエスト情報を受け取る
2.戻り値として結果を返す

action属性にuseActionDataでアクションからの戻り地を取得
例）エラーチェックをしてエラー箇所を表示数する

Form

formではなくForm
フォームデータをrequestから取得
const form = await request.formData();
form.get("title");

PUROGU LADESU

ポエムがメインのブログです。