Resolvido: Use o aplicativo History React Router v6

Última atualização: 09/11/2023
autor: Trilha de origem JavaScript

O principal problema relacionado ao uso do History React Router v6 é que ele não suporta roteamento baseado em hash. Isso significa que todas as URLs devem ser caminhos absolutos, o que pode dificultar o gerenciamento e a manutenção do aplicativo. Além disso, não há suporte interno para rotas dinâmicas, o que pode ser um problema ao criar aplicativos complexos com várias páginas. Por fim, o History React Router v6 não fornece nenhum suporte para renderização do lado do servidor, o que pode ser necessário em alguns casos.

import {
  BrowserRouter as Router,
  Switch,
  Route,
  useHistory,
} from "react-router-dom";

 function App() {

   const history = useHistory();

   // Handle a button click to push a new entry onto the history stack.
   function handleClick() {
     history.push("/new-location");
   }

   return (
     <div>      
       <button type="button" onClick={handleClick}>Go to New Location</button>       

       <Switch>        
         <Route path="/new-location">          
           <NewLocation />        
         </Route>      

       </Switch>    

     </div>   ); }

// Este código importa os componentes BrowserRouter, Switch, Route e useHistory da biblioteca react-router-dom.
// Em seguida, ele cria uma função chamada App que usa o hook useHistory para criar um objeto de histórico.
// Este objeto de histórico é usado em uma função chamada handleClick que empurra uma nova entrada para a pilha de histórico quando é chamada.
// A função App então retorna algum JSX que inclui um botão com um manipulador onClick que chama handleClick quando clicado.
// Finalmente, há um componente Switch com um componente Route dentro dele que renderiza o componente NewLocation quando seu caminho corresponde a “/new-location”.

O que é usarHistória

useHistory é um React Hook fornecido pelo React Router que permite que os componentes acessem o objeto de histórico para navegar programaticamente. Ele pode ser usado para enviar novos locais para a pilha de histórico, substituir o local atual, ir e voltar no histórico, etc.

Como faço para obter o histórico de rota em reagir

No React Router, você pode obter o histórico da rota usando o hook useHistory. Esse gancho dá acesso à instância do histórico que você pode usar para navegar, ir e voltar no histórico do seu aplicativo e muito mais. Para utilizá-lo, basta importar o hook do React Router e depois chamá-lo em seu componente:

importar { useHistory } de 'react-router-dom';

const MeuComponente = () => {
histórico const = useHistory();

// Agora você pode acessar o histórico da rota através do objeto `history`.

Retorna (…);
}

O roteador de reação usa API de histórico

Sim, o React Router usa a API de histórico do HTML5 para acompanhar o local atual e seu histórico. Isso permite que o React Router atualize a página sem precisar recarregá-la, tornando a navegação mais rápida e suave. A API de histórico também permite links diretos, o que torna mais fácil para os usuários compartilhar links que os levam diretamente a uma página específica em um aplicativo.

Artigos relacionados: