Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado.
Crie uma página 404 personalizada usando uma rota simples do React para oferecer aos seus visitantes uma experiência útil quando eles mais precisarem.
Mais cedo ou mais tarde, um usuário visitará uma URL que não existe em seu site. O que o usuário faz depois disso depende de você.
Eles podem pressionar o botão Voltar e sair do seu site. Em vez disso, você pode fornecer uma página 404 útil para ajudá-los a continuar navegando em seu site.
Para sites React, você pode usar o roteador React para criar uma página 404 não encontrada útil.
Criando uma página 404
O erro 404 ocorre quando você tenta visitar uma página em um site que o servidor não consegue encontrar. Como desenvolvedor, lidar com erros 404 significa criar uma página que o servidor usa como substituta quando não consegue encontrar a página solicitada.
No React, você faz isso criando um componente não encontrado que renderizará em rotas que não existem.
Este artigo pressupõe que você já tenha um aplicativo React funcionando com roteamento configurado. Se não o fizer, criar um aplicativo React e depois instale React Router.
Crie um novo arquivo chamado NotFound.js e adicione o seguinte código para criar a página 404.
importar { Link } de "react-router-dom";
exportarpadrãofunçãoNão encontrado() {
retornar (
<div>
<h1>Ops! Você parece estar perdido.</h1>
<p>Aqui estão alguns links úteis:</p>
<Link para ='/'>Lar</Link>
<Link para ='/blog'>blog</Link>
<Link para ='/contact'>Contato</Link>
</div>
)
}
Esta página 404 renderiza uma mensagem e links para redirecionar um usuário para páginas comuns no site.
Encaminhamento para a página 404
Você pode criar uma rota normal usando o roteador React assim:
importar { Rota, Rotas } de "react-router-dom";
funçãoAplicativo() {
retornar (
<Rotas>
<Caminho da rota="/" elemento={ <Lar/> }/>
</Routes>
)
}
Você especifica o caminho da URL e o elemento que deseja renderizar nessa rota.
A página 404 é exibida para caminhos que não existem no site. Portanto, em vez de especificar o caminho, use um asterisco (*).
<Caminho da rota='*' elemento={<Não encontrado />}/>
Usando * renderiza o componente NotFound para todas as URLs não especificadas nas rotas.
Roteamento em React
Você pode criar facilmente uma página 404 para todas as URLs que não existem em seu aplicativo da web React usando um roteador.
Os navegadores têm uma página 404 padrão, mas a criação de uma página personalizada permite que você informe aos usuários o que deu errado e como eles podem corrigi-lo. Você também pode criar uma página 404 que se encaixe na sua marca.
