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-domUma 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">></span>
<Link para ="/products"
className={location.pathname.startsWith("/products")? "breadcrumb-active": "breadcrumb-not-active"}
>
Produtos
</Link>
<span className="seta de migalhas de pão">></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-breadcrumbsUma 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.
