React Router v6 を使用して React にブレッドクラムを実装する

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

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

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

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

セットアップ中

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

npm install reverse-router-dom

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

糸追加反応ルーターダム

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

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

コンポーネントの実装

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

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

 <div className='text-primary'>
   <nav aria-label='breadcrumb'>
      <ol className='breadcrumb'>
        <li className='breadcrumb-item pointer'>
          <span className='bi bi-arrow-left-short me-1'></span>
            Back
        </li>
      </ol>
   </nav>
</div>

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

  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<IRoute[]>([]);

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

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 ? (
    <li className='breadcrumb-item'>{x.name}</li>
      ) : (
        <li className='breadcrumb-item'>
          <Link to={x.path} className=' text-decoration-none'>
            {x.name}
          </Link>
        </li>
      )
 )}

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

これで、完全な 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 (
    

      

        

          

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

                
                  {x.name}
                
              
            )
          )}
        
      
    
  );
};
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 からインスピレーションを得ています。

以上がReact Router v6 を使用して React にブレッドクラムを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。