O Guia do Hitchhiker para React Router v4: [correspondência, localização, história] - seus melhores amigos!

Ei! Bem-vindo ao Guia do Hitchhiker para o Roteador React v4, Parte II!

Agora que definimos o que está acontecendo com nosso primeiro pequeno aplicativo, vamos nos concentrar em seus três companheiros de viagem: partida , localização e história .

O que acontece se você entrar no código do seu componente doméstico e colocar um console.log lá para verificar os adereços?

O roteador introduz em seu componente os seguintes objetos:

Uau! De onde veio isso? ?

Bem, cada visão, componente ou o que quer que seja embalado pelo Roteador tem esses objetos. faz seu trabalho como um componente de ordem superior e envolve seus componentes ou visualizações e injeta esses três objetos como acessórios dentro deles.

Então ... por que eles estão lá e que uso posso fazer deles? ?

Eles serão seus melhores amigos! Confie em mim! ?

Combine

O objeto de correspondência contém informações sobre como um correspondeu ao URL.

  • params : (objeto), pares de chave / valor analisados ​​a partir do URL correspondente aos segmentos dinâmicos do caminho
  • isExact : (booleano), verdadeiro se todo o URL foi correspondido (sem caracteres à direita)
  • caminho : (string), o padrão de caminho usado para corresponder. Útil para construir rotas aninhadas . Veremos isso mais tarde em um dos próximos artigos.
  • url : (string), a parte correspondente do URL. Útil para construir links aninhados.

Portanto, no componente Home , temos este objeto de correspondência :

isExact é verdadeiro porque o URL inteiro foi correspondido, o objeto params está vazio porque não passamos nada para ele, o caminho e os valores da chave de url são iguais, confirmando que isExact é verdadeiro.

Agora, vamos dar uma olhada na visualização TopicList :

Nada de novo até agora, mesma história da Home View , mostrando o caminho e a url de TopicList .

Mas e se dermos uma olhada em TopicDetails ?

Ok, o que temos aqui?

isExact continua sendo verdadeiro porque o URL inteiro foi correspondido. O objeto params traz as informações de topicId que foram passadas para o componente.

Preste atenção em como o topicId é uma variável.

Mas onde ele assume o valor de Tópico1 ?

Simples, você está invocando de maneira explícita nos Links TopicList .

Verifique como usamos a correspondência para TopicList para saber seu URL.

Este link pode ser dinâmico . Mais tarde, faremos um exemplo onde você faz um link para um caminho relativo onde você não sabe previamente se é o Tópico1 ou Tópico3520 .

Mas…

Em que situação o isExact é falso?

Bem ... deixe-me dar um exemplo:

Nessa situação, introduzimos / HelloWorldSection no URL do navegador.

O que acontece é que o Roteador não conhece o caminho completo para a HelloWorldSection, então ele o direciona até onde conhece o caminho.

isExact mostra false, informando exatamente que “o URL inteiro não foi correspondido ”.

Isso é muito útil, como você verá assim que começar a fazer SPAs com o RRv4!

Apenas para finalizar nossa abordagem de correspondência, confira:

Usamos match.params.topicId para imprimir na tela o nome do nosso tópico.

Este é um dos usos mais comuns para correspondência .

Claro que tem uma infinidade de aplicações. Suponha que precisamos buscar uma API com essas informações de topicId . ?

Localização

O objeto de localização representa onde o aplicativo está agora, para onde você deseja que ele vá ou mesmo onde estava.

Também é encontrado em history.location, mas você não deve usá-lo porque é mutável.

Um objeto de localização nunca sofre mutação, portanto, você pode usá-lo nos ganchos do ciclo de vida para determinar quando a navegação acontece. Isso é realmente útil para busca de dados ou efeitos colaterais DOM .

Vamos console.log (localização) dentro da tela inicial :

Não vamos mergulhar muito fundo e continuar com sua funcionalidade simples.

Você tem a chave / valor do nome do caminho .

Você pode usá-lo, por exemplo, para verificar se o nome do caminho foi alterado:

Você pode ou para isso. Você pode fazer um history.push ou history.replace como veremos mais tarde.

Você pode criar um objeto personalizado e usá-lo

  • history.push (locationX)

Você também pode passá-lo para e componentes.

Isso os impedirá de usar o local real no estado do roteador. Talvez você queira enganar um componente para renderizá-lo em um local diferente do real?

Chega de localização agora ...

Vamos para a história !

História

O objeto de histórico permite que você gerencie e controle o histórico do navegador dentro de suas visualizações ou componentes.

  • comprimento : (número), o número de entradas na pilha de histórico
  • ação : (string), a ação atual (PUSH, REPLACE ou POP)
  • localização : (objeto), a localização atual
  • push (caminho, [estado]) : (função), coloca uma nova entrada na pilha de histórico
  • substituir (caminho, [estado]) : (função), substitui a entrada atual na pilha de histórico
  • go (n) : (função), move o ponteiro na pilha do histórico por n entradas
  • goBack () : (função), equivalente a go (-1)
  • goForward () : (função,) equivalente a go (1)
  • bloquear (prompt) : (função), impede a navegação

Portanto, vamos console.log o objeto de histórico em nossa visualização inicial e ver o que ele mostra:

Ok, exatamente o que estávamos esperando.

Isso nos diz que chegamos aqui com uma ação PUSH , que o comprimento do objeto é 40 (conforme você navega pelo histórico do aplicativo aumenta para 50 e para aí, descartando as entradas mais antigas e mantendo seu tamanho cada vez que o aplicativo empurra outra entrada de histórico no objeto).

Dá-nos as informações de localização .

Novamente, o objeto de histórico é mutável . Portanto, é recomendado acessar o local a partir dos adereços de renderização de Route , não de history.location .

Isso garante que suas suposições sobre o React estejam corretas nos ganchos do ciclo de vida.

Por exemplo:

Normalmente, você pode usá-lo para alterar o caminho do URL do navegador.

No exemplo abaixo, evitamos e criar um botão que empurra o histórico:

É claro que você pode usá-lo para acionar a mudança de URL após alguma busca de dados ou efeitos colaterais.

É confortável usá-lo no meio do JSX, onde você não deseja invocar componentes. Você pode simplesmente retornar um push de histórico e acionar o Roteador para atualizar o URL do navegador.

Por último mas não menos importante

Acho que a essa altura você já tem uma boa ideia de como usar o fósforo , a localização e o histórico .

Não fiz nenhuma alteração em nosso padrão inicial, portanto, fique à vontade para brincar com ele no mesmo repositório fornecido na Parte 1 deste guia.

05. Bibliografia

Para fazer este artigo, usei a documentação do React Router que você pode encontrar aqui.

Todos os outros sites que usei estão vinculados ao documento para adicionar informações ou fornecer contexto para o que tentei explicar a você.

Este artigo é a parte 2 de uma série chamada “Guia do Hitchhiker para React Router v4”

  • Parte I: Roteador Grok React em 20 minutos
  • Parte III: caminhos recursivos, ao infinito e além!
  • Parte IV: configuração de rota, o valor oculto de definir uma matriz de configuração de rota

? Muito obrigado!