Você já notou aqueles pequenos pedaços de texto em alguns sites que indicam sua localização atual no site? Esses são chamados de breadcrumbs e podem ser uma maneira útil de orientar os usuários, especialmente ao navegar por sites complexos. Este artigo mostrará como criar breadcrumbs em React.js.

O que são Breadcrumbs e como eles são importantes?

Breadcrumbs são tipicamente pequenos pedaços de texto que mostram a localização atual em um site. Eles podem ser úteis para orientar os usuários, especialmente ao navegar por sites com várias páginas. Ao fornecer uma trilha de links, o breadcrumbs pode ajudar os usuários a entender onde eles estão em um site e permitir que eles naveguem de volta para as seções anteriores facilmente.

É importante observar que breadcrumbs não devem ser usados ​​como o principal meio de navegação em um site. Em vez disso, eles devem ser usados ​​em conjunto com outros elementos de navegação, como um menu ou uma barra de pesquisa.

Como criar breadcrumbs em React.js

Existem duas maneiras principais de criar breadcrumbs em React.js: usando o

react-router-dom biblioteca ou usando o use-react-router-breadcrumbs biblioteca. Mas antes de começar, você tem que criar um aplicativo React.

Método 1: usando a biblioteca react-router-dom

Com a biblioteca react-router-dom, você pode criar breadcrumbs manualmente para cada caminho em seu aplicativo React. A biblioteca fornece um componente que pode ser usado para criar breadcrumbs.

Para usar a biblioteca react-router-dom, primeiro você precisa instalá-la usando o npm:

npm instalar react-router-dom

Uma vez instalada a biblioteca, você pode importá-la para seu componente React:

importar { Link } de 'react-router-dom'

Você pode então usar o componente para criar breadcrumbs:

<Link para ="/">Lar</Link>
<Link para ="/products">Produtos</Link>
<Link para ="/products/1">Produto 1</Link>

Agora, você pode adicionar algum estilo à trilha de navegação e destacar a página atual em que está. Para isso, você pode usar o nome da classe adereço do componente. Para obter o nome do caminho atual, você pode usar o localização objeto da biblioteca react-router-dom:

importar { Link, useLocation } de 'react-router-dom'
funçãoMigalhas de pão() {
const local = useLocal();
retornar (
<navegação>
<Link para ="/"
 className={location.pathname "/"? "breadcrumb-active": "breadcrumb-not-active"}
>
 Lar
</Link>
<Link para ="/products"
 className={location.pathname.startsWith("/products")? "breadcrumb-active": "breadcrumb-not-active"}
>
 Produtos
</Link>
<Link para ="/products/1"
 className={location.pathname "/products/1"? "breadcrumb-active": "breadcrumb-not-active"}
>
 Produto 1
</Link>
</nav>
 );
}
exportarpadrão Migalhas de pão;

Agora, crie um novo arquivo CSS e nomeie-o breadcrumbs.css. Adicione as seguintes regras CSS ao arquivo:

.breadcrumb-não-ativo {
 cor: #cccccc;
}
.breadcrumb-active {
 cor: #000000;
}
.breadcrumb-arrow {
 margem esquerda: 10px;
 margem direita: 10px;
}

Agora, importe seu arquivo CSS para o componente React e adicione o seta de migalhas de pão aula para sua componentes:

importar { Link, useLocation } de 'react-router-dom'
importar "./breadcrumbs.css";
funçãoMigalhas de pão() {
const local = useLocal();
retornar (
<navegação>
<Link para ="/"
 className={location.pathname "/"? "breadcrumb-active": "breadcrumb-not-active"}
>
 Lar
</Link>
<span className="seta de migalhas de pão">&gt;</span>
<Link para ="/products"
 className={location.pathname.startsWith("/products")? "breadcrumb-active": "breadcrumb-not-active"}
>
 Produtos
</Link>
<span className="seta de migalhas de pão">&gt;</span>
<Link para ="/products/1"
 className={location.pathname "/products/1"? "breadcrumb-active": "breadcrumb-not-active"}
>
 Produto 1
</Link>
</nav>
 );
}
exportarpadrão Migalhas de pão;

Há diferentes tipos de ganchos no React. A biblioteca react-router-dom useLocation hook fornece acesso ao objeto de localização, que possui informações sobre o caminho da URL atual.

O a propriedade className do componente adiciona uma classe CSS à trilha de navegação. A propriedade className recebe uma string ou um array de strings. Se for uma string, adicionará a string como uma única classe ao elemento. Se for uma matriz de strings, cada string na matriz será adicionada como uma classe separada.

O começa com O método verifica se o nome do caminho atual começa com "/products". Isso ocorre porque o breadcrumb para a página de produtos deve estar ativo não apenas quando o caminho é "/products", mas também quando o caminho é "/products/1", "/products/2", etc.

Método 2: usando a biblioteca use-react-router-breadcrumbs

Outra maneira de criar breadcrumbs no React é usando a biblioteca use-react-router-breadcrumbs. Essa biblioteca gera breadcrumbs automaticamente com base nas rotas definidas em seu aplicativo React.

Para usar esta biblioteca, primeiro você precisa instalá-la usando o npm:

npm instalarusar-react-router-breadcrumbs

Uma vez instalada a biblioteca, você pode importá-la para seu componente React:

importar use Breadcrumbs de 'use-react-router-breadcrumbs'

Você pode então usar o use Breadcrumbs gancho para criar breadcrumbs:

const breadcrumbs = useBreadcrumbs();
console.log (migalhas de pão);

Isso registrará uma matriz de objetos breadcrumb no console. Cada objeto breadcrumb contém informações sobre a rota, como nome, caminho e parâmetros.

Agora, você pode renderizar suas migalhas de pão na tela. Você pode usar o componente da biblioteca react-router para criar sua trilha de navegação:

importar { Link } de 'react-router-dom'
importar use Breadcrumbs de 'use-react-router-breadcrumbs'
const rotas = [
 { caminho: '/users/:userId', migalhas de pão: 'Exemplo 1' },
 { caminho: '/data', migalhas de pão: 'Exemplo 2' }
];
funçãoMigalhas de pão() {
const breadcrumbs = useBreadcrumbs (rotas);
console.log (migalhas de pão)
retornar (
<navegação>
 {breadcrumbs.map(({ match, breadcrumb }) => (
<Chave de link={match.url} para={match.url}>
 {migalhas de pão} /
</Link>
 ))}
</nav>
 );
}
exportarpadrão Migalhas de pão;

O componente Link é importado da biblioteca react-router-dom. Você usará esse componente para criar links para outras partes do aplicativo. Você também pode criar rotas protegidas usando o componente Link.

Uma matriz de objetos de rota é criada. Cada objeto de rota contém um caminho e uma propriedade breadcrumb. A propriedade path corresponde ao caminho da URL e a propriedade breadcrumb corresponde ao nome da breadcrumb.

O use Breadcrumbs gancho é usado para criar a farinha de rosca. Este hook aceita um array de rotas como parâmetro. As rotas são usadas para gerar as migalhas de pão.

O método map é usado para iterar sobre o array de breadcrumbs. Para cada pão ralado, um componente é criado. O componente Link tem um para prop, que corresponde ao caminho da URL da trilha de navegação. A própria trilha é renderizada como o conteúdo do componente.

Agora você pode adicionar algum estilo às migalhas de pão. Crie um novo arquivo CSS e nomeie-o Breadcrumbs.css. Depois disso, adicione as seguintes regras CSS ao arquivo:

.breadcrumb-não-ativo {
 cor: #cccccc;
}
.breadcrumb-active {
 cor: #000000;
}

Agora, você pode importar o arquivo CSS para o componente React e adicionar as classes breadcrumb ao componentes:

importar { Link, useLocation } de 'react-router-dom'
importar use Breadcrumbs de 'use-react-router-breadcrumbs'
importar "./Breadcrumbs.css";
const rotas = [
 { caminho: '/users/:userId', migalhas de pão: 'Exemplo 1' },
 { caminho: '/data', migalhas de pão: 'Exemplo 2' }
];
funçãoMigalhas de pão() {
const breadcrumbs = useBreadcrumbs (rotas);
const local = useLocal()
retornar (
<navegação>
 {breadcrumbs.map(({ match, breadcrumb }) => (
<Link 
 chave={match.url} 
 to={match.url}
 className={match.pathname location.pathname? "breadcrumb-active": "breadcrumb-not-active"}
>
 {migalhas de pão} / 
</Link>
 ))}
</nav>
 );
}
exportarpadrão Migalhas de pão;

Aumente o engajamento do usuário com Breadcrumbs

Com breadcrumbs, você pode não apenas ajudar os usuários a entender onde eles estão em seu site, mas também pode aumentar o engajamento do usuário. Breadcrumbs podem ser usados ​​para mostrar o progresso do usuário em uma tarefa, como um processo de inscrição ou uma compra. Ao mostrar o progresso do usuário, você pode incentivá-lo a concluir a tarefa.

Há também muitas outras coisas que você deve ter em mente ao criar um site, como usabilidade, acessibilidade e compatibilidade com dispositivos móveis. No entanto, se você tiver essas coisas em mente, poderá criar um site amigável e envolvente.