React Routerのきほん的な使い方を学ぶ

npm install --save-dev react-router-dom

import React from "react";
import { createRoot } from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <p>I'm the toooooop!</p>,
  },
  {
    path: "/child",
    element: <p>I'm your chiiiiiiiiiiiiiiiiiiild!</p>,
  },
]);

const rootDom = document.getElementById("root") as HTMLElement;
if (!rootDom) throw new Error("Root element not found");

const root = createRoot(rootDom);
root.render(
  <React.StrictMode>
    <a href="/">To Top</a>
    <RouterProvider router={router} />
    <a href="/child">To Child</a>
  </React.StrictMode>
);

import React from "react";
import { createRoot } from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
  Link,
  Outlet,
} from "react-router-dom";

// 共通レイアウトコンポーネントを新設
const Layout = () => (
  <>
    <Link to="/">To Top</Link>
    <Outlet /> {/* 子ルートのコンポーネントがレンダリングされる場所 */}
    <Link to="/child">To Child!</Link>
  </>
);

// トップページ用のコンポーネント
const TopPage = () => <p>I'm the toooooop!</p>;

// 子ページ用のコンポーネント
const ChildPage = () => <p>I'm a chiiiiiiiiiiiiiiiiiiilld!</p>;

// ルーターの定義
const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        index: true,
        element: <TopPage />,
      },
      {
        path: "child",
        element: <ChildPage />,
      },
    ],
  },
]);

const rootDom = document.getElementById("root");
if (!rootDom) throw new Error("Root element not found");

const root = createRoot(rootDom);
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

  {
    path: "/",
    element: <Layout />,
    children: [
      {
        index: true,//pathの代わりにこう指定すると、現在の階層の<Outlet/>にレンダリングされる
        element: <TopPage />,
      },
      {
        path: "child",
        element: <ChildPage />,
      },
    ],
  }

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      /*略*/
    ],
  },
  {
    path: "child",
    element: <AnotherLayout />,
    children: [
      /*略*/
    ],
  },
]);

function createBrowserRouter(
  routes: RouteObject[],
  opts?: {
    basename?: string; //アプリがルートにマウントされない場合のパス
    future?: FutureConfig; //v7の機能を使うかどうかのフラグのセット
    hydrationData?: HydrationState; //サーバサイドレンダリングで使う何か
    window?: Window; //グローバルwindow以外のwindowを使いたい時の何か
  }
): RemixRouter;

interface RouteObject {
  //コンポーネントを表示するパスを指定
  //先頭のスラッシュはいらない
  path?: string;
  //現在の階層の<Outlet />に、このルート（Route）の要素/コンポーネントを表示するかを指定
  //これをtrueにするときはpathプロパティは指定しない
  //うまく説明できないが、先述のサンプルコードの通りである
  index?: boolean;
  //Routeオブジェクト単体か、その配列で子ルートを指定
  children?: React.ReactNode;

  //指定パスにアクセスした時にデータのロードを実行する関数を指定
  loader?: LoaderFunction;
  //フォーム送信などがあった場合に実行する関数を指定
  action?: ActionFunction;

  //指定パスに表示するReact要素
  element?: React.ReactNode | null;
  //指定パスに表示するコンポーネントを指定;
  Component?: React.ComponentType | null;

  //指定パスへの遷移時にエラーが発生した場合に表示するReact要素を指定
  //404で表示したい内容とか
  errorElement?: React.ReactNode | null;
  //指定パスへの遷移時にエラーが発生した場合に表示するコンポーネントを指定
  ErrorBoundary?: React.ComponentType | null;

  //SSRで、データのロード中に表示するReact要素を指定
  hydrateFallbackElement?: React.ReactNode | null;
  //SSRで、データのロード中に表示するコンポーネントを指定
  HydrateFallback?: React.ComponentType | null;

  //パスの大文字・小文字を区別するかを指定
  caseSensitive?: boolean;
  //ルートの識別子を指定
  id?: string;

  //ルート固有のデータを指定
  handle?: RouteObject["handle"];
  //ローダーでロードするデータの再検証をする関数を指定
  shouldRevalidate?: ShouldRevalidateFunction;
  //遅延ロードされるルートの定義を提供する関数を指定
  lazy?: LazyRouteFunction<RouteObject>;
}

import React from "react";
import { createRoot } from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
  Link,
  Outlet,
  Route, //追加
  createRoutesFromElements, //追加
} from "react-router-dom";

// 共通レイアウトコンポーネント
const Layout = () => (
  <>
    <Link to="/">To Top</Link>
    <Outlet />
    <Link to="child">To Child!</Link>
  </>
);

// トップページ用のコンポーネント
const TopPage = () => <p>I'm the toooooop!</p>;

// 子ページ用のコンポーネント
const ChildPage = () => <p>I'm a chiiiiiiiiiiiiiiiiiiilld!</p>;

// ルーターの定義
const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Layout />}>
      <Route index element={<TopPage />} />
      <Route path="child" element={<ChildPage />} />
    </Route>
  )
);

const rootDom = document.getElementById("root");
if (!rootDom) throw new Error("Root element not found");

const root = createRoot(rootDom);
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

declare function RouterProvider(props: RouterProviderProps): React.ReactElement;

interface RouterProviderProps {
  // サーバサイドレンダリングを利用しない場合、
  // 初期化のために各階層でローダーが実行される。
  // その間に表示する要素
  fallbackElement?: React.ReactNode;
  // createBrowserRouter()関数でこさえたRotuerオブジェクト
  router: Router;
  // v7の機能を使うかどうかのフラグのセット
  future?: Partial<FutureConfig>;
}

declare function Link(props: LinkProps): React.ReactElement;

interface LinkProps
  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
  //遷移先のパス
  //スラッシュをつけない相対パスで指定する
  //上の階層を指定する場合は、cdコマンドのように'.'を使う
  //例えば'../'で1つ上の階層を意味する
  to: To;
  //リンクをクリックして遷移する際に、ページの先頭へスクロールするのを防ぐか
  preventScrollReset?: boolean;
  //パスをRouteオブジェクトの階層で判断するか、パスの階層で判断するか
  //デフォルトでは'route'。
  relative?: "route" | "path";
  //遷移時にドキュメント全体をリロードするか
  //つまりaタグのように振る舞うか
  reloadDocument?: boolean;
  //履歴スタックの現在のエントリーを置き換えるか
  replace?: boolean;
  //history.stateに格納する値を指定
  state?: any;
  //よくわからん
  unstable_viewTransition?: boolean;
}

type To = string | Partial<Path>;

interface Path {
  pathname: string;
  search: string;
  hash: string;
}

interface OutletProps {
  //親から子へ渡すデータ
  context?: unknown;
}
declare function Outlet(props: OutletProps): React.ReactElement | null;