ブレッドクラムは、ユーザーに Web ページ内の現在の位置を追跡する方法を提供し、Web ページのナビゲーションにも役立つため、Web ページの開発において重要です。

このガイドでは、react-router v6 と Bootstrap を使用して React にパンくずリストを実装します。

React-router v6 は、Web ページまたは Web アプリ内を移動するために React および React Native で使用されるルーティング ライブラリです。

私たちの実装では Typescript を使用していますが、JavaScript ベースのプロジェクトにも簡単に使用できます。

セットアップ中

まず、react-router-dom がまだインストールされていない場合は、プロジェクトにインストールしましょう:

npm インストール リアクトルーターダム

または糸を使用することもできます:

糸追加反応ルーターダム

コンポーネントをスタイル設定するためにブートストラップもインストールしましょう:

npm インストール ブートストラップ

コンポーネントの実装

次に、ブレッドクラムのマークアップを含む Breadcrumbs.tsx コンポーネントを作成し、ルートの場所を基準とした現在の場所を決定するために必要なロジックも含めます。

コンポーネントの簡単なマークアップを追加することから始めましょう:

コンポーネントには現在、「戻る」ボタンだけがあります。クリックすると前のページが読み込まれるように、戻るボタンの簡単な実装を追加しましょう:

  const goBack = () => {
    window.history.back();
  };

次のステップは、matchRoutes 関数を使用して現在のルートを取得し、現在のルートに関連するすべてのルートをフィルタリングする変換を適用する関数を作成することです。
matchRoute は、AgnosticRouteObject 型のオブジェクトの配列を受け入れ、AgnosticRouteMatch[] | を返します。 null ここで、T は渡すオブジェクトのタイプです。
また、オブジェクトには path.

まずルートのインターフェイスを宣言しましょう:

export interface IRoute {
  name: string;
  path: string; //Important
}

次にルートを宣言しましょう:

const routes: IRoute[] = [
  {
    path: '/home',
    name: 'Home'
  },
  {
    path: '/home/about',
    name: 'About'
  },
  {
    path: '/users',
    name: 'Users'
  },
  {
    path: '/users/:id',
    name: 'User'
  },
  {
    path: '/users/:id/settings/edit',
    name: 'Edit User Settings'
  }
];

useLocation フックを保持する変数と、状態のブレッドクラムを保持する別の変数も宣言します。

const location = useLocation();
const [crumbs, setCrumbs] = useState([]);

次に、関数を実装しましょう:

const getPaths = () => {
  const allRoutes = matchRoutes(routes, location);
  const matchedRoute = allRoutes ? allRoutes[0] : null;
  let breadcrumbs: IRoute[] = [];
  if (matchedRoute) {
    breadcrumbs = routes
      .filter((x) => matchedRoute.route.path.includes(x.path))
      .map(({ path, ...rest }) => ({
        path: Object.keys(matchedRoute.params).length
          ? Object.keys(matchedRoute.params).reduce(
              (path, param) => path.replace(`:${param}`, matchedRoute.params[param] as string), path)
          : path,
        ...rest,
      }));
  }
  setCrumbs(breadcrumbs);
};

ここでは、まず現在の場所に一致するすべてのルートを取得します:
const allRoutes = matchRoutes(ルート, 場所);

次に、結果が返されたかどうかを簡単にチェックし、最初の結果を取得します。
const matchedRoute = allRoutes ? allRoutes[0] : null;

次に、現在のルートに一致するすべてのルートをフィルタリングします:
Routes.filter((x) => matchedRoute.route.path.includes(x.path))

次に、その結​​果を使用して、パスに params があるかどうかを確認し、動的ルートを params 値で交換する新しい配列を作成しましょう。

 .map(({ path, ...rest }) => ({
          path: Object.keys(matchedRoute.params).length
            ? Object.keys(matchedRoute.params).reduce(
                (path, param) => path.replace(`:${param}`, matchedRoute.params[param] as string),
                path
              )
            : path,
          ...rest,
        }));

これにより、ルート内でルートを /users/:id/edit として宣言し、ID が 1 として渡された場合、/users/1/edit が取得されることが保証されます。

次に、useEffect で関数を呼び出して、位置が変更されるたびに関数が実行されるようにしましょう。

  useEffect(() => {
    getPaths();
  }, [location]);

これが完了すると、マークアップでパンくずを使用できるようになります:

{crumbs.map((x: IRoute, key: number) =>
  crumbs.length === key   1 ? (
    

ここでは、名前のみを表示する最後のパンくずを除き、すべてのパンくずをリンクとともに表示します。

これで、完全な BreadCrumbs.tsx コンポーネントが完成しました:

import { useEffect, useState } from 'react';
import { Link, matchRoutes, useLocation } from 'react-router-dom';

export interface IRoute {
  name: string;
  path: string;
}

const routes: IRoute[] = [
  {
    path: '/home',
    name: 'Home',
  },
  {
    path: '/home/about',
    name: 'About',
  },
  {
    path: '/users',
    name: 'Users',
  },
  {
    path: '/users/:id/edit',
    name: 'Edit Users by Id',
  },
];

const Breadcrumbs = () => {
  const location = useLocation();
  const [crumbs, setCrumbs] = useState([]);

  //   const routes = [{ path: '/members/:id' }];

  const getPaths = () => {
    const allRoutes = matchRoutes(routes, location);
    const matchedRoute = allRoutes ? allRoutes[0] : null;
    let breadcrumbs: IRoute[] = [];
    if (matchedRoute) {
      breadcrumbs = routes
        .filter((x) => matchedRoute.route.path.includes(x.path))
        .map(({ path, ...rest }) => ({
          path: Object.keys(matchedRoute.params).length
            ? Object.keys(matchedRoute.params).reduce(
                (path, param) => path.replace(`:${param}`, matchedRoute.params[param] as string),
                path
              )
            : path,
          ...rest,
        }));
    }
    setCrumbs(breadcrumbs);
  };

  useEffect(() => {
    getPaths();
  }, [location]);

  const goBack = () => {
    window.history.back();
  };

  return (
    

      
  );
};
export default Breadcrumbs;

これで、アプリケーションの任意の部分、できればレイアウトでコンポーネントを使用できるようになります。

結論

ナビゲーションと UX を向上させるためにアプリに追加できる単純なブレッドクラム コンポーネントを実装する方法を確認しました。

役立つリンク

https://stackoverflow.com/questions/66265608/react-router-v6-get-path-pattern-for-current-route

https://medium.com/@mattywilliams/generated-an-automatic-breadcrumb-in-react-router-fed01af1fc3 この投稿はそこからインスピレーションを得ています。