React Router Hooks

Maintenant que vous comprenez pourquoi les crochets sont ajoutés pour le routage, voyons les crochets en action.

useParams

Le useParamscrochet renvoie un objet contenant des paires clé-valeur des paramètres passés dans une URL dynamique.

Par exemple, supposons que vous ayez un Usercomposant de page qui accepte un idcomme paramètre dans l'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>
  );
};

Les useHistorycrochets renvoient l' historyobjet que le routeur utilise en interne pour gérer les changements de route. L' historyobjet est utilisé pour gérer l'historique des sessions.

Par exemple, vous pouvez utiliser la history.push()méthode pour ajouter une nouvelle entrée à la pile d'historique et naviguer l'utilisateur à partir de la route actuelle :

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

Le useLocationHook vous permet d'accéder à l' locationobjet qui représente l'URL active. La valeur de l' locationobjet change chaque fois que l'utilisateur accède à une nouvelle URL.
Le useLocationcrochet peut être pratique lorsque vous devez déclencher un événement chaque fois que l'URL change.

Considérez que vous devez garder une trace des vues sur les pages de profil des utilisateurs. Vous pouvez détecter les changements dans l' locationobjet à l'aide du useEffectcrochet, fourni avec 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>
  );
};

Le useRouteMatchcrochet fait correspondre l'URL active avec un chemin donné, de la même manière que le Routecomposant fonctionne. C'est un Hook très intéressant ; vous pouvez vous débarrasser du Routecomposant inutile et accéder à l' matchobjet.

Vous pouvez maintenant changer le chemin dans le composant route de la page utilisateur pour simplement/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>
  );
};

Conclusion

Les crochets sont un excellent ajout à l'écosystème React. Maintenant que vous avez vu du code sur la gestion du routage avec Hooks, vous êtes prêt à tirer pleinement parti de ce qu'ils ont à offrir.

Jusqu'à la prochaine fois, restez en sécurité et continuez à coder avec React Hooks !