useParams, como você reage?

Enquanto continuo minha jornada de banqueiro de tecnologia para engenheiro de software, um mês ou mais se passou e eu voltei para o modo de projeto. O foco dos meus estudos tem sido o framework React e como construir aplicativos da web de forma declarativa .

Desta vez, a curva de aprendizado quando comparada com o que experimentei na primeira parte do meu bootcamp (que me levou da experiência zero com JavaScript para tornar algo funcional) foi significativamente mais suave.

A estrutura React e sua abordagem baseada em componentes realmente me agradaram, entrar nela depois que a biblioteca ficou fora por tanto tempo significa que meu ponto de partida foi usar ganchos e componentes funcionais prontos para uso . Embora um conhecimento prático de componentes baseados em classe tenha sido adquirido, os ganchos me deixaram, bem, fisgado!

Como mencionado, o modo de projeto está sobre mim, e a tarefa é aparentemente simples, mas com escopo amplo a ponto de ser bastante intimidante, sendo - usando criar-reagir-app, fazer um aplicativo de página única, que usa vários componentes e rotas do lado do cliente que também interage com uma API, sua ou pública. Parece tão direto, no entanto, a franqueza do briefing significou que se decidir sobre um tópico foi um tanto opressor. Que tópico você escolheria desenvolver se estivesse nesta posição? Coloque nos comentários abaixo, eu adoraria ouvir.

Acho que devo revelar o que decidi: escolhi criar uma galeria de arte, minha visão era uma landing page com a introdução da galeria de arte, uma página da galeria e uma sobre a página do artista, três simples 'páginas' para conectar o meu rotas do lado do cliente para no webapp da galeria.

Ao ler a documentação do React Router , o gancho useParamssaltou para mim como uma meta potencial de expansão - e se cada obra de arte na minha galeria pudesse ter um URL separado e definido?

Como funciona

Como useParams funciona no roteador react , a documentação para isso é bastante clara, mas basicamente useParams permite que você conecte em uma URL e tome parte dela como seu parâmetro para usar em um componente. Isto é representado por :<param>para significar no caminho da URL, no exemplo abaixo se uma imagem for solicitada a partir da URL “./images/42" o correspondente <div>na renderização mostrará no display o texto “Agora mostrando a imagem 42”

import {
  BrowserRouter as Router,
  Switch,
  Route,
  useParams
} from "react-router-dom";
function DisplayImage() {
    let { id } = useParams();
    return <div>Now showing image {id}</div>
<Router>
    <Switch>
        <Route exact path="/">
           <HomePage />
        </Route>
        <Route path="/images/:id">
           <DisplayImage />
        </Route>
    <Switch>
</Router>

Manipulação de erros

Utilizar esse método significava que agora eu tinha todas as imagens com links exclusivos, que podiam acessar e renderizar diretamente as imagens. Um erro que encontrei durante o teste foi que, como ele estava tentando OBTER uma imagem e passá-la para um segundo componente como um suporte, o segundo componente sempre renderizaria, portanto, um link inválido: id não lançaria um erro e pararia a página renderizando conforme pretendido. Ele passaria um array vazio como prop, o que apenas deixaria elementos div vazios e um pouco de formatação, o que não é uma boa aparência.

Depois de algum google-fu, descobri que uma solicitação GET que resulta em uma mensagem de erro de status 404: arquivo não encontrado ainda conclui uma promessa de busca (GET), portanto, não gerará um erro para uma solicitação .catch, que é salva apenas para erros do servidor. Então, eu tive que adicionar uma condição IF à minha resposta de busca para que, se estivesse fora dos meios usuais, eu jogaria o elemento para o .catch mais próximo na solicitação.

Como meu bloco de código acima mostra, isso é definido como uma variável de estado que poderia ser monitorada e, se algo entrasse nela e aumentasse o state.length, eu poderia renderizar uma página de erro diferente ou de outra forma renderizar o componente de exibição de imagem. Em seguida, também me permitiu ter um método simples para ter uma mensagem de carregamento no outro componente quando os adereços estavam demorando para serem preenchidos e exibidos dentro do componente. (Oba latência!)

The TL / DR

useParams é uma parte incrivelmente útil do roteador react, que permite criar links individuais enquanto usa o mínimo de código e mantém as coisas organizadas na instrução do switch do roteador. Apenas tome cuidado com os erros.

Assim que o projeto entrar no ar, atualizarei com links para que você também possa dar um passeio pelas galerias.

Como sempre entre em contato se quiser saber mais sobre meus projetos ou sobre mim em geral!