快捷導(dǎo)航

如何使用 React Router v6 在 React 中實現(xiàn)面包屑

更新時間：2024年09月30日 11:49:14 作者：憂郁的蛋~

面包屑在網(wǎng)頁開發(fā)中的角色不可忽視,它們?yōu)橛脩籼峁┝艘环N跟蹤其在網(wǎng)頁中當(dāng)前位置的方法,并有助于網(wǎng)頁導(dǎo)航,本文介紹了如何使用react-router v6和bootstrap在react中實現(xiàn)面包屑,感興趣的朋友一起看看吧

設(shè)置

首先，如果尚未安裝的話，讓我們在我們的項目中安裝react-router-dom：

npm 安裝react-router-dom

或者替代方案，使用紗線：

紗線添加react-router-dom

讓我們也安裝 bootstrap 來設(shè)計我們的組件：

npm 安裝引導(dǎo)

實現(xiàn)我們的組件

然后我們創(chuàng)建一個 breadcrumbs.tsx 組件，它將包含面包屑的標(biāo)記，還包括確定相對于根位置的當(dāng)前位置的必要邏輯。

讓我們首先為組件添加一個簡單的標(biāo)記：

<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>

該組件目前只有一個后退按鈕。讓我們?yōu)楹笸税粹o添加一個簡單的實現(xiàn)，這樣當(dāng)單擊時，應(yīng)該加載上一頁：

const goback = () =&gt; {
    window.history.back();
  };

下一步將編寫一個函數(shù)，該函數(shù)將使用 matchroutes 函數(shù)來獲取當(dāng)前路由并應(yīng)用轉(zhuǎn)換來過濾出與當(dāng)前路由相關(guān)的所有路由。
matchroute 接受 agnosticrouteobject 類型的對象數(shù)組并返回 agnosticroutematch[] | null 其中 t 是我們傳入的對象的類型。
另外需要注意的是，該對象必須包含名為 path 的屬性。

讓我們首先為我們的路線聲明一個接口：

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 鉤子，還聲明了另一個變量來保存面包屑的狀態(tài)：

const location = uselocation();
const [crumbs, setcrumbs] = usestate<iroute>([]);
</iroute>

接下來，讓我們實現(xiàn)我們的功能：

const getpaths = () =&gt; {
  const allroutes = matchroutes(routes, location);
  const matchedroute = allroutes ? allroutes[0] : null;
  let breadcrumbs: iroute[] = [];
  if (matchedroute) {
    breadcrumbs = routes
      .filter((x) =&gt; matchedroute.route.path.includes(x.path))
      .map(({ path, ...rest }) =&gt; ({
        path: object.keys(matchedroute.params).length
          ? object.keys(matchedroute.params).reduce(
              (path, param) =&gt; path.replace(`:${param}`, matchedroute.params[param] as string), path)
          : path,
        ...rest,
      }));
  }
  setcrumbs(breadcrumbs);
};

在這里，我們首先獲取與當(dāng)前位置匹配的所有路線：
const allroutes = matchroutes(路線, 位置);

然后我們快速檢查是否返回任何結(jié)果，并選擇第一個：
常量匹配路由=所有路由？ allroutes[0] : null;

接下來，我們過濾掉所有與當(dāng)前路由匹配的路由：
routes.filter((x) =>matchedroute.route.path.includes(x.path))

然后讓我們使用結(jié)果創(chuàng)建一個新數(shù)組，檢查路徑是否有參數(shù)，然后用參數(shù)值交換動態(tài)路由：

.map(({ path, ...rest }) =&gt; ({
          path: object.keys(matchedroute.params).length
            ? object.keys(matchedroute.params).reduce(
                (path, param) =&gt; path.replace(`:${param}`, matchedroute.params[param] as string),
                path
              )
            : path,
          ...rest,
        }));

這確保了如果我們在路由中將路由聲明為 /users/:id/edit 并將 id 傳遞為 1，那么我們將得到 /users/1/edit。

接下來，讓我們在 useeffect 中調(diào)用我們的函數(shù)，以便每次我們的位置發(fā)生變化時它都會運行：

useeffect(() =&gt; {
    getpaths();
  }, [location]);

完成此操作后，我們就可以在標(biāo)記中使用面包屑：

{crumbs.map((x: iroute, key: number) =&gt;
  crumbs.length === key + 1 ? ({x.name}
) : (
{x.name}
) )}

在這里，顯示所有的面包屑及其鏈接，除了最后一個僅顯示名稱的面包屑。

這樣，我們現(xiàn)在就有了完整的 breadcrumbs.tsx 組件：

import { useEffect, useState } from 'react';
import { Link, matchRoutes, useLocation } from 'react-router-dom';
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 = () =&gt; {
  const location = useLocation();
  const [crumbs, setCrumbs] = useState<iroute>([]);
  const getPaths = () =&gt; {
    const allRoutes = matchRoutes(routes, location);
    const matchedRoute = allRoutes ? allRoutes[0] : null;
    let breadcrumbs: IRoute[] = [];
    if (matchedRoute) {
      breadcrumbs = routes
        .filter((x) =&gt; matchedRoute.route.path.includes(x.path))
        .map(({ path, ...rest }) =&gt; ({
          path: Object.keys(matchedRoute.params).length
            ? Object.keys(matchedRoute.params).reduce(
                (path, param) =&gt; path.replace(`:${param}`, matchedRoute.params[param] as string),
                path
              )
            : path,
          ...rest,
        }));
    }
    setCrumbs(breadcrumbs);
  };
  useEffect(() =&gt; {
    getPaths();
  }, [location]);
  const goBack = () =&gt; {
    window.history.back();
  };
  return (
    <div classname="">
      <nav aria-label="breadcrumb"><ol classname="breadcrumb">
<li classname="breadcrumb-item pointer" onclick="{goBack}">
            <span classname="bi bi-arrow-left-short me-1"></span>
            Back
          </li>
          {crumbs.map((x: IRoute, key: number) =&gt;
            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}
              </li>
            )
          )}
        </ol></nav>
</div>
  );
};
export default Breadcrumbs;
</iroute>

然后我們可以在應(yīng)用程序的任何部分使用該組件，最好是在布局中。