Navegação e Roteamento

React Router para Web

No desenvolvimento de aplicações web com React, a navegação entre diferentes páginas ou componentes é gerenciada por bibliotecas como o React Router. O React Router é uma solução completa que permite gerenciar rotas, navegando entre diferentes views dentro de uma aplicação de forma intuitiva e eficiente.

1. Instalação do React Router:

   • Para começar a usar o React Router em sua aplicação React, primeiro você precisa instalá-lo:

     npm install react-router-dom
     

2. Configurando Rotas:

   • As rotas são configuradas dentro de um componente Router, geralmente o BrowserRouter para aplicações web. Você define cada rota usando o componente Route.

   import React from 'react';
   import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
   import Home from './Home';
   import About from './About';
   
   function App() {
     return (
       <Router>
         <Switch>
           <Route exact path="/" component={Home} />
           <Route path="/about" component={About} />
         </Switch>
       </Router>
     );
   }
   
   export default App;
   

3. Navegação entre Páginas:

   • Para navegar entre as páginas, você pode usar o componente Link fornecido pelo React Router, que substitui o uso tradicional de tags <a>.

   import React from 'react';
   import { Link } from 'react-router-dom';
   
   function Navigation() {
     return (
       <nav>
         <Link to="/">Home</Link>
         <Link to="/about">About</Link>
       </nav>
     );
   }
   
   export default Navigation;
   

4. Rotas Aninhadas:

   • O React Router também suporta rotas aninhadas, permitindo que você defina sub-rotas dentro de outras rotas.

   function Dashboard() {
     return (
       <Switch>
         <Route path="/dashboard/profile" component={Profile} />
         <Route path="/dashboard/settings" component={Settings} />
       </Switch>
     );
   }
   

React Navigation para Mobile

No React Native, a navegação é gerenciada pela biblioteca React Navigation, que fornece uma solução poderosa e flexível para navegação em aplicações móveis. React Navigation suporta diferentes tipos de navegação, como pilhas, abas e gavetas.

1. Instalação do React Navigation:

   • Para instalar o React Navigation, você precisa instalar o pacote principal e as dependências necessárias:

     npm install @react-navigation/native
     npm install @react-navigation/native-stack
     npm install react-native-screens react-native-safe-area-context
     

2. Configurando o Navegador de Pilha (Stack Navigator):

   • O navegador de pilha é um dos tipos mais comuns de navegação, onde as telas são empilhadas uma sobre a outra.

   import React from 'react';
   import { NavigationContainer } from '@react-navigation/native';
   import { createNativeStackNavigator } from '@react-navigation/native-stack';
   import HomeScreen from './HomeScreen';
   import DetailsScreen from './DetailsScreen';
   
   const Stack = createNativeStackNavigator();
   
   function App() {
     return (
       <NavigationContainer>
         <Stack.Navigator initialRouteName="Home">
           <Stack.Screen name="Home" component={HomeScreen} />
           <Stack.Screen name="Details" component={DetailsScreen} />
         </Stack.Navigator>
       </NavigationContainer>
     );
   }
   
   export default App;
   

3. Navegação entre Telas:

   • Para navegar entre telas, você pode usar o hook useNavigation ou acessar diretamente a prop navigation disponível em cada tela.

   import React from 'react';
   import { Button } from 'react-native';
   import { useNavigation } from '@react-navigation/native';
   
   function HomeScreen() {
     const navigation = useNavigation();
   
     return (
       <Button
         title="Go to Details"
         onPress={() => navigation.navigate('Details')}
       />
     );
   }
   
   export default HomeScreen;
   

4. Navegadores de Abas e Gavetas:

   • O React Navigation também suporta outros tipos de navegação, como abas (BottomTabNavigator) e gavetas (DrawerNavigator), que podem ser usados para criar layouts mais complexos.

   import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
   import { createDrawerNavigator } from '@react-navigation/drawer';
   
   const Tab = createBottomTabNavigator();
   const Drawer = createDrawerNavigator();
   

Navegação Avançada: Tabs, Drawers, e Stack Navigation

React Navigation é altamente flexível, permitindo a combinação de diferentes tipos de navegadores para criar fluxos de navegação complexos em aplicativos móveis.

1. Combinação de Navegadores:

   • Você pode combinar navegadores de pilha, abas e gavetas para criar uma experiência de usuário rica e intuitiva.

   function App() {
     return (
       <NavigationContainer>
         <Drawer.Navigator>
           <Drawer.Screen name="Home" component={HomeStack} />
           <Drawer.Screen name="Settings" component={SettingsScreen} />
         </Drawer.Navigator>
       </NavigationContainer>
     );
   }
   
   function HomeStack() {
     return (
       <Stack.Navigator>
         <Stack.Screen name="Home" component={HomeScreen} />
         <Stack.Screen name="Profile" component={ProfileScreen} />
       </Stack.Navigator>
     );
   }
   

2. Configurações e Opções:

   • Cada tipo de navegador suporta uma ampla variedade de opções para personalizar a navegação, como cabeçalhos personalizados, animações de transição, entre outros.

   <Stack.Screen
     name="Details"
     component={DetailsScreen}
     options={{ title: 'Detalhes', headerStyle: { backgroundColor: '#f4511e' } }}
   />
   

Conclusão

A navegação é um aspecto essencial no desenvolvimento de aplicações tanto para web quanto para mobile. React Router e React Navigation fornecem as ferramentas necessárias para implementar fluxos de navegação eficientes e intuitivos, seja em aplicações web ou móveis. No próximo tópico, exploraremos o gerenciamento de estado em React e React Native.

Referências

• Documentação oficial do React Router
• React Navigation
• Guia de navegação avançada com React Navigation