Ganchos do roteador React

Agora que você entende porque Hooks são adicionados para roteamento, vamos ver os Hooks em ação.

useParams

O useParamsHook retorna um objeto contendo pares chave-valor dos parâmetros passados ​​em uma URL dinâmica.

Por exemplo, digamos que você tenha um Usercomponente de página que aceite an idcomo parâmetro na URL.

<Route path="/user/:id">
  <User />
</Route>

import { useParams } from "react-router-dom";

const User = () => {
  const params = useParams();
console.log(params);
return (
    // ...
  )
}

{
  id: 3,
}

import {
  // ...
  useParams,
} from "react-router-dom";
// /user/:id
const User = () => {
  const params = useParams();
return (
    <div>
      <div>This is the user page</div>
      <div>current user Id - {params.id}</div>
    </div>
  );
};

Os useHistoryHooks retornam o historyobjeto, que o roteador usa internamente para lidar com as mudanças de rota. O historyobjeto é usado para gerenciar o histórico de sessões.

Por exemplo, você pode usar o history.push()método para adicionar uma nova entrada à pilha de histórico e navegar pelo usuário da rota atual:

import {
  // ...
  useHistory,
} from "react-router-dom";
const User = () => {
  const history = useHistory();
  const params = useParams();
const handleBack = () => {
    history.goBack();
  };
const handleNavigation = () => {
    history.push("/user/5");
  };
return (
    <div>
      <div>This is the user page</div>
      <div>current user Id - {params.id}</div>
      <div>
        <button onClick={handleBack}>Go Back</button>
      </div>
      <div>
        <button onClick={handleNavigation}>Go To Different User</button>
      </div>
    </div>
  );
};

useLocation

O useLocationGancho permite acessar o locationobjeto que representa a URL ativa. O valor do locationobjeto muda sempre que o usuário navega para uma nova URL.
O useLocationHook pode ser conveniente quando você precisa acionar qualquer evento sempre que a URL for alterada.

Considere que você precisa acompanhar as visualizações nas páginas de perfil dos usuários. Você pode detectar mudanças no locationobjeto usando o useEffectHook, que vem com o React.

import {
  // ...
  useLocation,
} from "react-router-dom";
const User = () => {
  const history = useHistory();
  const params = useParams();
  const location = useLocation();
useEffect(() => {
    console.log(location.pathname);
    // Send request to your server to increment page view count
  }, [location]);
const handleBack = () => {
    history.goBack();
  };
const handleNavigation = () => {
    history.push("/user/5");
  };
return (
    <div>
      <div>This is the user page</div>
      <div>current user Id - {params.id}</div>
      <div>
        <button onClick={handleBack}>Go Back</button>
      </div>
      <div>
        <button onClick={handleNavigation}>Go To Different User</button>
      </div>
    </div>
  );
};

O useRouteMatchHook corresponde à URL ativa com um determinado caminho, de forma semelhante à forma como o Routecomponente funciona. É um gancho muito interessante; você pode se livrar do Routecomponente desnecessário e acessar o matchobjeto.

Agora você pode alterar o caminho no componente de rota da página do usuário para simplesmente /user:

<Route path="/user/">
  <User />
</Route>

import {
  // ...
  useRouteMatch,
} from "react-router-dom";
const User = () => {
  const history = useHistory();
const routeMatch = useRouteMatch("/user/:id");
  const location = useLocation();
useEffect(() => {
    console.log(location);
  }, [location]);
const handleBack = () => {
    history.goBack();
  };
const handleNavigation = () => {
    history.push("/user/5");
  };
return (
    <div>
      <div>This is the user page</div>
      {routeMatch ? (
        <div>user Id - {routeMatch.params.id}</div>
      ) : (
        <div>You are viewing your profile</div>
      )}
<div>
        <button onClick={handleBack}>Go Back</button>
      </div>
      <div>
        <button onClick={handleNavigation}>Go To Different User</button>
      </div>
    </div>
  );
};

Conclusão

Hooks são uma ótima adição ao ecossistema React. Agora que você viu algum código sobre como lidar com roteamento com Hooks, você está pronto para aproveitar ao máximo o que eles têm a oferecer.

Até a próxima, fique seguro e continue codificando com React Hooks!