Melaksanakan Breadcrumbs dalam React menggunakan React Router v6

Breadcrumb adalah penting dalam pembangunan halaman web kerana ia menyediakan pengguna dengan cara untuk menjejaki lokasi semasa mereka dalam halaman web kami dan juga membantu dalam navigasi halaman web kami.

Dalam panduan ini, kami akan melaksanakan serbuk roti dalam React menggunakan react-router v6 dan Bootstrap.

React-router v6 ialah perpustakaan penghalaan yang digunakan dalam React dan React Native untuk menavigasi dalam halaman web atau apl web.

Pelaksanaan kami menggunakan Typescript tetapi ia juga boleh digunakan dengan mudah untuk projek berasaskan Javascript.

Sediakan

Pertama, mari pasang react-router-dom dalam projek kami jika ia belum dipasang:

npm pasang react-router-dom

Atau alternatif, menggunakan benang:

benang tambah react-router-dom

Mari pasang bootstrap untuk menggayakan komponen kami:

npm pasang bootstrap

Melaksanakan komponen kami

Kami kemudiannya mencipta komponen Breadcrumbs.tsx yang akan mengandungi penanda untuk serbuk roti dan juga termasuk logik yang diperlukan untuk menentukan lokasi semasa berbanding lokasi akar.

Mari kita mulakan dengan menambah penanda mudah untuk komponen:

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

Komponen pada masa ini hanya mempunyai butang belakang. Mari tambahkan pelaksanaan mudah untuk butang belakang supaya apabila diklik, halaman sebelumnya harus dimuatkan:

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

Langkah seterusnya ialah menulis fungsi yang akan menggunakan fungsi matchRoutes untuk mendapatkan laluan semasa dan menggunakan transformasi untuk menapis semua laluan berkaitan ke laluan semasa.
matchRoute menerima tatasusunan objek jenis AgnosticRouteObject dan mengembalikan rentetan AgnosticRouteMatch<, T>[] | null dengan T ialah jenis objek yang kita lalui.
Juga penting untuk diperhatikan ialah objek mesti mengandungi sifat bernama laluan.

Mari kita isytiharkan antara muka untuk laluan kita dahulu:

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

Mari kita isytiharkan laluan kita:

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'
  }
];

Kami juga mengisytiharkan pembolehubah untuk memegang cangkuk useLocation dan juga satu lagi untuk memegang serbuk roti kami dalam keadaan:

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

Seterusnya, mari laksanakan fungsi kami:

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);
};

Di sini, kami mula-mula mendapatkan semua laluan yang sepadan dengan lokasi semasa:
const allRoutes = matchRoutes(laluan, lokasi);

Kami kemudian melakukan semakan pantas untuk melihat sama ada sebarang keputusan dikembalikan sama sekali dan kami mengambil yang pertama:
const matchedRoute = allRoutes ? allRoutes[0] : null;

Seterusnya, kami menapis semua laluan yang sepadan dengan laluan semasa:
routes.filter((x) => matchedRoute.route.path.includes(x.path))

Kemudian mari kita gunakan hasilnya untuk mencipta tatasusunan baharu yang menyemak sama ada laluan mempunyai param dan kemudian menukar laluan dinamik dengan nilai 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,
        }));

Ini memastikan bahawa jika kami mengisytiharkan laluan sebagai /users/:id/edit dalam laluan dan id diluluskan sebagai 1, maka kami mendapat /users/1/edit.

Seterusnya, mari kita panggil fungsi kita dalam useEffect supaya ia berjalan setiap kali lokasi kita berubah:

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

Dengan ini selesai, kami kemudian boleh menggunakan serbuk dalam markup kami:

{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>
      )
 )}

Di sini, paparkan semua serbuk dengan pautannya kecuali yang terakhir yang hanya memaparkan nama.

Dengan itu, kami kini mempunyai komponen BreadCrumbs.tsx penuh kami:

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;

Kami kemudiannya boleh menggunakan komponen dalam mana-mana bahagian aplikasi kami, sebaik-baiknya dalam reka letak.

Kesimpulan

Kami telah melihat cara melaksanakan komponen serbuk roti ringkas yang boleh kami tambahkan pada apl kami untuk meningkatkan navigasi dan UX.

Pautan berguna

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

https://medium.com/@mattywilliams/generating-an-automatic-breadcrumb-in-react-router-fed01af1fc3 yang mana siaran ini mendapat inspirasi.

Atas ialah kandungan terperinci Melaksanakan Breadcrumbs dalam React menggunakan React Router v6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!