React: lidando com colisão de nomes de componentes

E o React Router possui um componente diferente, mas de mesmo nome:

E agora, o que fazer?

Bom, a gente pode resolver isso utilizando alias (apelido, em tradução livre do inglês), dessa forma:

E o uso ficou assim:

Agora que você já entendeu o que aconteceu, vamos mergulhar mais fundo!

Nós, pessoas desenvolvedoras que lidam com front-end, lidamos diariamente com imports e exports no universo do JavaScript, mas nem sempre paramos para entender o que são e como funcionam os módulos. Vamos então mergulhar mais fundo nesse tema?

Um módulo ES6(eles passaram a existir desde esta versão do JS) é um arquivo que contém código JS. Não há uma palavra reservada ou qualquer outro tratamento especial; um módulo normalmente se comporta como se fosse um script. Existem dois pontos que já quero trazer:

• Os módulos usam modo estrito, mesmo que você não declare o "use strict" neles.
• Você pode usar, importar e exportar módulos.

Por padrão, tudo que é declarado dentro de um módulo só existe localmente. Se você quiser disponibilizar alguma coisa que foi criada ali basta utilizar a palavra reservada export.

Exportando uma classe:

Ou uma função:

E podemos ter um export default (exportação padrão):

E, do outro lado, podemos importar o que precisamos:

Ou mesmo, múltiplos imports:

Podemos também importar somente o default, assim a sintaxe fica ligeiramente diferente:

Outra coisa comum é combinar as importações, pegando o default junto com algum outro export:

E podemos trabalhar com module objects, importando simplesmente tudo o que foi exportado, assim:

E com isso fechamos um bom apanhado sobre o que podemos fazer ao importar e exportar módulos, inclusive a solução pro nosso problema inicial. A importação com alias:

Que consiste em renomear algo que foi importado.

Podemos fazer muitas coisas com JavaScript, não é? E falando nisso, se você quiser se aprofundar mais no universo do front-end, que tal conhecer as formações da Alura?

• React com JavaScript
• React com TypeScript
• React: consumindo APIs

Bons estudos!! :)