WebFadoni, programação, notícias, tudo sobre o mundo da programação e da tecnologia, você vai encontrar aqui no WebFadoni.

WebFadoni
27/Jun/2022 12:56

Como o React Hooks pode substituir o React Router

O roteamento é uma necessidade quando se trata de aplicativos de página única. Os desenvolvedores usam várias bibliotecas de roteamento para implementar o roteamento para seus aplicativos. Para o React, o React Router é a biblioteca principal para lidar com roteamento, e há uma enorme comunidade em torno dele.

WebFadoni

No entanto, com o surgimento de React Hooks como uma solução alternativa, o Hookrouter foi apresentado como um roteador flexível e rápido baseado em Hooks.

Neste artigo, vamos discutir se existe a possibilidade de substituir o React Router enquanto aproveita o poder dos hooks com o Hookrouter.

Definindo Rotas

Suponha que você esteja desenvolvendo um aplicativo React com três páginas. A maneira convencional de implementar o roteamento com o React Router é a seguinte.

import Nav from './components/Nav';
import Home from './components/Home';
import Users from './components/Users';
import Profile from './components/Profile';
import {BrowserRouter as Router,Route} from'react-router-dom'; 

function App() { 
  return ( 
      <Router> 
        <div className="App"><Nav/> 
          <Route path = '/' component = {Home}/> 
          <Route path = '/users' component = {Users}/> 
          <Route path = '/profile' component = {Profile}/></div> 
      </Router> 
  );
}

export default App;

Definir rotas com o Hookrouter é bastante simples. Você só precisa definir rotas como um objeto JavaScript simples. O Hook useRoutes() no módulo Hookrouter analisa e retorna um resultado para um objeto de rotas predefinido. Temos que definir as rotas como chaves no objeto de rotas e seus valores como funções que são acionadas quando as rotas correspondem.

import {useRoutes} from 'hookrouter';
import Nav from './components/Nav';
import Home from './components/Home';
import Users from './components/Users';
import Profile from './components/Profile';

function App() { 
   const routes = { 
     '/' :()=><Home/>, 
     '/users' :()=> <Users/>, 
     '/profile' :()=> <Profile/>, 
};
const routeResults = useRoutes(routes); 
return ( 
     <div className="App"> 
	<Nav/> 
	{routeResults} 
     </div> 
);
} 

export default App;

O roteamento com useRoutes() parece atraente, pois não há muito o que fazer por nós. Para cada rota no aplicativo, temos que renderizar o componente ao usar o React Router. Mas com o Hookrouter, podemos simplesmente usar as rotas definidas em nosso aplicativo enviando-as para o Hook useRoutes() .

O Hookrouter produz o mesmo resultado que o React Router, mas de maneira mais simplificada e leve.

Navegação

O React Router oferece o componente para configurar navegações de rota e lidar com roteamento interativo.

import React from 'react';
import {Link} from 'react-router-dom';

function Nav() { 
  return ( 
    <div> 
      <nav>
        <ul className='nav-links'> 
          <Link className='Link' to='/'> 
          <li>HOME</li> </Link> 
          <Link className='Link' to='/users'> 
          <li>USERS</li> </Link> 
          <Link className='Link' to='/profile'> 
          <li>PROFILE</li> </Link>
        </ul> 
      </nav> 
    </div> 
  );
}

export default Nav;

Para facilitar a navegação, o módulo Hookrouter envolve a tag âncora HTML "a" como "A".

import React from 'react';
import {A} from 'hookrouter'; 

function Nav() { 
  return ( 
    <div> 
      <nav> 
        <ul className='nav-links'> 
          <A className='Link' href='/'>
            <li>HOME</li> 
          </A> 
          <A className='Link' href='/users'> 
            <li>USERS</li> 
          </A> 
          <A className='Link' href='/profile'> 
            <li>PROFILE</li> 
          </A> 
        </ul> 
      </nav> 
    </div> 
  );
} 

export default Nav;

O Hookrouter está disponível como um componente React e é completamente equivalente à tag "a" inerente. A única diferença é que, em vez de carregar uma nova página, o Hookrouter move as navegações para a pilha de histórico.

Nos aplicativos React, o Hookrouter nos permite configurar navegações de rota e lidar com roteamento interativo renderizando as rotas na tela e navegando até elas quando clicadas.

O Hookrouter fornece funcionalidade de navegação programática com o navigate(). Podemos aplicar o navigate() aos usuários diretos de uma página específica definida por uma determinada URL absoluta ou relativa. Use o exemplo a seguir para navegar para uma página inicial.

navigate('/home');

Como toda chamada para a função navigate() é uma navegação para frente, os usuários podem usar o botão voltar em seu navegador para retornar à URL anterior. O Hook navigation() aceita três parâmetros: navigate(url, [replace], [queryParams]) . Podemos usar o segundo deles para substituir o comportamento do botão Voltar. Ele exclui a entrada de histórico existente e cria uma nova em seu lugar. Para fazer isso, basta definir seu argumento como true.

navigate('/home', true);

Alternar Funcionalidade

Quando as rotas de navegação predefinidas não são correspondidas, o React Router renderiza uma página padrão usando o componente "Switch".

Ele nos ajuda a renderizar uma página 404 para informar ao usuário que a rota solicitada não está disponível no aplicativo. Para conseguir isso, encapsulamos todas as rotas renderizadas dentro do componente "Switch" e renderizamos a página 404 sem especificar uma prop de caminho.

import Nav from './components/Nav';
import Home from './components/Home';
import Users from './components/Users';
import Profile from './components/Profile';
import Error from './components/Error';
import {BrowserRouter as Router, Switch,Route} from'react-router-dom'; 
  
function App() { 
  return ( 
    <Router>
      <div className="App">
        <Nav/>
        <Switch> 
          <Route path = '/' exact component = {Home}/> 
          <Route path = '/users' component = {Users}/> 
          <Route path = '/profile'exact component = {Profile}/>
          <Route><Error/></Route> 
        </Switch>
      </div> 
    </Router> 
  );
}

export default App;

É fácil renderizar rotas condicionalmente com o Hookrouter, pois criamos um objeto de rotas que compreende todos os nossos caminhos de rota. Você tem que passar esse objeto para o Hook useRoutes() . Quando uma rota definida não for correspondida, basta passar o arquivo de erro 404 para renderização, junto com a função result.

import {useRoutes} from 'hookrouter';
import Home from './components/Home';
import Users from './components/Users';
import Profile from './components/Profile';
import Error from './components/Error'; 

function App() { 
  const routes = { 
    '/' :()=><Home/>, 
    '/users' :()=> <Users/>, 
    '/profile' :()=> <Profile/>, 
  }; 

  const routeResults = useRoutes(routes); 
  return ( 
    <div className="App"> 
  <Nav/> 
  {routeResults||<Error/>} 
    </div> 
  );
} 

export default App;

Uma coisa que descobri com o React Router é que, se não declararmos o caminho exato, isso resultará em roteamentos imprecisos em alguns casos.

Por exemplo, se não mencionarmos o caminho para casa como exato, o aplicativo não roteará para nenhum outro caminho que comece com '/'. Como consequência, o aplicativo nunca navegará para as páginas de usuários ou de perfil e, em vez disso, continuará voltando para a página inicial.

O Hookrouter, por outro lado, não requer definições explícitas de caminhos exatos, pois as rotas são declaradas como um objeto.

Redirecionamentos

Quando os usuários desejam redirecionar dinamicamente de uma rota para outra, precisamos de redirecionamento. Podemos fazer isso com o React Router usando alguns métodos, como usar o objeto history ou o componente "Redirect".

Por exemplo, se tivermos um formulário de login, podemos usar o objeto de histórico do navegador para redirecionar os usuários logados para a rota '/home'.

import React from 'react';

class Login extends React.Component { 
loginUser = () => { 
// if (user is logged in successfully) 
      this.props.history.push('/home') 
} 
  render() { 
    return ( 
      <form>
        <input type="name" />
        <input type="email" /> 
        <button onClick={this.loginUser}>Login</button> 
      </form> 
    ) ;
  }
}

export default Login;

O Hookrouter lida com redirecionamentos com o Hook useRedirect() simples , que usa a rota de origem e a rota de destino como parâmetros.

import {useRoutes, useRedirect} from 'hookrouter';
import Home from "./components/Home"; 
  
const routes = { 
    '/login': () => <Login />, 
    '/home': () => <Home />
};
  
const Users = () => {
    useRedirect('/login', '/home'); 
    const routeResult = useRoutes(routes); 
    return routeResult;
}

Como uma intenção de navegação de substituição é acionada por este Gancho, o histórico de navegação terá apenas uma entrada. Como resultado, se a rota '/login' for redirecionada para '/home', conforme indicado no último trecho de código, a rota '/login' será removida do histórico do navegador.

Considerações Finais

O React Router é sem dúvida uma ferramenta fantástica. Mas, para alguns projetos, o React Router pode ser excessivo se você precisar apenas de navegação simples e funcionalidade de roteamento.

Por outro lado, o React Router tem muitos componentes de navegação que você pode usar para estruturar seu aplicativo declarativamente, o que pode ser bastante benéfico para requisitos de navegação mais amplos e sofisticados em aplicativos React.

No entanto, com o lançamento de Hooks, muita coisa aconteceu no React. Portanto, ao lidar com rotas em aplicativos menores, a abordagem baseada em Hooks fornece uma solução mais flexível e limpa.

Atualmente, não vejo a possibilidade de que Hooks substituam o React Router. Mas, com o tempo, se continuar a evoluir com funcionalidades ricas, pode ter o potencial de assumir o controle.