Breadcrumbs são importantes no desenvolvimento de páginas da web, pois fornecem aos usuários uma maneira de acompanhar sua localização atual em nossa página da web e também auxiliam na navegação em nossa página da web.

Neste guia, implementaremos breadcrumbs no React usando react-router v6 e Bootstrap.

React-router v6 é uma biblioteca de roteamento usada em React e React Native para navegar em uma página da web ou aplicativo da web.

Nossa implementação usa Typescript, mas também pode ser facilmente usada para um projeto baseado em Javascript.

Configurando

Primeiro, vamos instalar o react-router-dom em nosso projeto se ele ainda não tiver sido instalado:

npm instalar react-router-dom

Ou alternativa, usando fio:

yarn adicionar react-router-dom

Vamos também instalar o bootstrap para estilizar nosso componente:

inicialização de instalação npm

Implementando nosso componente

Em seguida, criamos um componente Breadcrumbs.tsx que conterá a marcação para a localização atual e também incluirá a lógica necessária para determinar a localização atual em relação à localização raiz.

Vamos começar adicionando uma marcação simples para o componente:

O componente atualmente possui apenas um botão Voltar. Vamos adicionar uma implementação simples para o botão Voltar, de modo que, quando clicado, a página anterior seja carregada:

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

O próximo passo será escrever uma função que usará a função matchRoutes para obter a rota atual e aplicar transformações para filtrar todas as rotas relacionadas à rota atual.
O matchRoute aceita uma matriz de objetos do tipo AgnosticRouteObject e retorna um AgnosticRouteMatch[] | null onde T é o tipo de objeto que passamos. Também é importante observar que o objeto deve conter uma propriedade chamada path.

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

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

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

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

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

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

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

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