Sistema de Múltiplos Idiomas em React com React Router

Criando um Sistema de Múltiplos Idiomas com React Router

Criar uma aplicação que suporte múltiplos idiomas é uma necessidade comum em projetos de software, especialmente quando se trata de alcançar um público global. Neste tutorial, vamos explorar como implementar um sistema de múltiplos idiomas em uma aplicação React utilizando o React Router. Vamos passo a passo entender como configurar as rotas para que a URL reflita o idioma selecionado pelo usuário.

Estrutura do Projeto

Antes de começarmos, vamos definir a estrutura do nosso projeto. Para este exemplo, consideramos uma aplicação React básica com as seguintes pastas e arquivos:

/src
  /components
    Home.js
About.js
  /locales
    en.js
    es.js
  App.js
  index.js

Configurando as Traduções

Vamos começar criando arquivos de tradução. Na pasta /locales, crie dois arquivos: en.js e es.js. Cada um deles conterá as traduções para os idiomas correspondentes.

locales/en.js

const translations = {
    welcome: 'Welcome',
About: 'About Us'
};
export default translations;

locales/es.js

const translations = {
    welcome: 'Bienvenido',
About: 'Sobre Nosotros'
};
export default translations;

Esses arquivos simples armazenam as traduções que utilizaremos na nossa aplicação.

Configurando o React Router

Agora, vamos configurar o React Router no nosso arquivo App.js. Comece importando os componentes necessários:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import { useTranslation } from 'react-i18next';

Abaixo, configure as rotas de acordo com o idioma:

function App() {
    const { i18n } = useTranslation();

    return (
        <Router>
            <Switch>
                <Route path='/en/home' component={Home} />
                <Route path='/es/home' component={Home} />
                <Route path='/en/about' component={About} />
                <Route path='/es/about' component={About} />
            </Switch>
        </Router>
    );
}

Neste código, estamos criando rotas para as páginas Home e About, que podem ser acessadas em inglês e espanhol. O React Router gerencia a navegação entre essas rotas.

Implementando a Lógica de Tradução

Agora que temos as rotas configuradas, precisamos implementar a lógica para mudar o idioma com base na URL. Para isso, vamos usar o hook useEffect para detectar a mudança de idioma:

useEffect(() => {
    const lang = window.location.pathname.split('/')[1];  // pega o idioma da URL
    i18n.changeLanguage(lang);
}, [i18n]);

Com este código, sempre que a URL mudar, o idioma da aplicação será atualizado automaticamente.

Criando Componentes

Agora, vamos criar nossos componentes Home e About que utilizarão as traduções. No arquivo Home.js:

import React from 'react';
import { useTranslation } from 'react-i18next';

const Home = () => {
    const { t } = useTranslation();

    return <h1>{t('welcome')}</h1>;
};

export default Home;

E no arquivo About.js:

import React from 'react';
import { useTranslation } from 'react-i18next';

const About = () => {
    const { t } = useTranslation();

    return <h1>{t('about')}</h1>;
};

export default About;

Esses componentes exibem as traduções correspondentes com base no idioma selecionado na URL.

Testando a Aplicação

Agora que tudo está configurado, execute sua aplicação. Você deve ser capaz de navegar entre as rotas /en/home, /es/home, /en/about, e /es/about, e ver o conteúdo traduzido corretamente.

Conclusão

Neste tutorial, aprendemos como implementar um sistema de múltiplos idiomas em uma aplicação React usando o React Router. Essa abordagem não só melhora a acessibilidade da aplicação, mas também atende a um público mais amplo. Experimente adicionar mais idiomas ou traduções para enriquecer ainda mais sua aplicação. Boa codificação!

Entenda a Importância de Múltiplos Idiomas em Aplicações React

Implementar um sistema de múltiplos idiomas em uma aplicação React é uma prática essencial para atender a uma audiência global. Este conceito não só melhora a usabilidade, mas também amplia a acessibilidade do seu projeto. Ao utilizar o React Router em conjunto com bibliotecas de tradução, como o i18next, você pode criar uma experiência de usuário muito mais rica. Neste texto, vamos explorar as melhores práticas e dicas para garantir que sua aplicação seja facilmente adaptável a diferentes idiomas.

Algumas aplicações:

• Criação de sites multilíngues
• Desenvolvimento de aplicativos móveis com suporte a idiomas diversos
• Facilitação de acesso a conteúdos para usuários em diferentes regiões

Dicas para quem está começando

• Estude sobre bibliotecas de tradução como i18next.
• Pratique a configuração do React Router com múltiplos idiomas.
• Teste sua aplicação em diferentes idiomas para verificar a precisão das traduções.

Compartilhe este tutorial