Implementieren von Breadcrumbs in React mit React Router v6

Breadcrumbs sind wichtig bei der Entwicklung von Webseiten, da sie Benutzern die Möglichkeit bieten, den Überblick über ihren aktuellen Standort auf unserer Webseite zu behalten, und auch bei der Navigation auf unserer Webseite helfen.

In diesem Leitfaden implementieren wir Breadcrumbs in React mit React-Router v6 und Bootstrap.

React-router v6 ist eine Routing-Bibliothek, die in React und React Native zum Navigieren innerhalb einer Webseite oder Web-App verwendet wird.

Unsere Implementierung verwendet Typescript, kann aber auch problemlos für ein Javascript-basiertes Projekt verwendet werden.

Einrichten

Zuerst installieren wir „react-router-dom“ in unserem Projekt, falls es noch nicht installiert wurde:

npm install React-Router-Dom

Oder alternativ mit Garn:

Garn fügt React-Router-Dom hinzu

Lassen Sie uns auch Bootstrap für das Styling unserer Komponente installieren:

npm install bootstrap

Implementierung unserer Komponente

Wir erstellen dann eine Breadcrumbs.tsx-Komponente, die das Markup für die Breadcrumbs enthält und auch die notwendige Logik enthält, um den aktuellen Standort relativ zum Stammstandort zu bestimmen.

Beginnen wir mit dem Hinzufügen eines einfachen Markups für die Komponente:

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

Die Komponente verfügt derzeit nur über eine Zurück-Schaltfläche. Fügen wir eine einfache Implementierung für die Zurück-Schaltfläche hinzu, sodass beim Klicken die vorherige Seite geladen werden soll:

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

Der nächste Schritt besteht darin, eine Funktion zu schreiben, die die Funktion matchRoutes verwendet, um die aktuelle Route abzurufen und Transformationen anzuwenden, um alle mit der aktuellen Route verbundenen Routen herauszufiltern.
Die matchRoute akzeptiert ein Array von Objekten vom Typ AgnosticRouteObject und gibt ein AgnosticRouteMatch[] | zurück null wobei T der Typ des Objekts ist, das wir übergeben.
Wichtig zu beachten ist auch, dass das Objekt eine Eigenschaft namens path.

Lassen Sie uns zunächst eine Schnittstelle für unsere Route deklarieren:

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

Dann erklären wir unsere Routen:

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

Wir deklarieren außerdem eine Variable, um den useLocation-Hook zu speichern, und eine weitere, um unsere Breadcrumbs im Status zu halten:

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

Als nächstes implementieren wir unsere Funktion:

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

Hier erhalten wir zunächst alle Routen, die zum aktuellen Standort passen:
const allRoutes = matchRoutes(routes, location);

Wir prüfen dann kurz, ob überhaupt ein Ergebnis zurückgegeben wird, und nehmen das erste:
const matchedRoute = allRoutes ? allRoutes[0] : null;

Als nächstes filtern wir alle Routen heraus, die zur aktuellen Route passen:
Routen.filter((x) => matchedRoute.route.path.includes(x.path))

Dann verwenden wir das Ergebnis, um ein neues Array zu erstellen, das prüft, ob der Pfad Parameter enthält, und dann dynamische Routen mit dem Parameterwert austauscht:

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

Dadurch wird sichergestellt, dass wir /users/1/edit erhalten, wenn wir in den Routen eine Route als /users/:id/edit deklarieren und die ID als 1 übergeben wird.

Als nächstes rufen wir unsere Funktion in einem useEffect auf, damit sie jedes Mal ausgeführt wird, wenn sich unser Standort ändert:

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

Sobald dies erledigt ist, können wir die Krümel in unserem Markup verwenden:

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

Hier werden alle Krümel mit ihren Links angezeigt, mit Ausnahme des letzten, der nur den Namen anzeigt.

Damit haben wir jetzt unsere vollständige BreadCrumbs.tsx-Komponente:

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;

Wir können die Komponente dann in jedem Teil unserer Anwendung verwenden, vorzugsweise im Layout.

Abschluss

Wir haben gesehen, wie wir eine einfache Breadcrumbs-Komponente implementieren, die wir unserer App hinzufügen können, um die Navigation und UX zu verbessern.

Nützliche Links

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, von dem dieser Beitrag inspiriert ist.

Das obige ist der detaillierte Inhalt vonImplementieren von Breadcrumbs in React mit React Router v6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!