Router-Hooks reagieren

Nachdem Sie nun verstanden haben, warum Hooks für das Routing hinzugefügt werden, sehen wir uns die Hooks in Aktion an.

useParams

Der useParamsHook gibt ein Objekt zurück, das Schlüssel-Wert-Paare der übergebenen Parameter in einer dynamischen URL enthält.

Angenommen , Sie haben eine UserSeitenkomponente, die ein idals Parameter in der URL akzeptiert.

<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>
  );
};

Die useHistoryHooks geben das historyObjekt zurück, das der Router intern verwendet, um die Routenänderungen zu verarbeiten. Das historyObjekt wird zum Verwalten des Sitzungsverlaufs verwendet.

Sie können die history.push()Methode beispielsweise verwenden, um dem Verlaufsstapel einen neuen Eintrag hinzuzufügen und den Benutzer von der aktuellen Route zu navigieren:

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

Der useLocationHook ermöglicht Ihnen den Zugriff auf das locationObjekt, das die aktive URL darstellt. Der Wert des locationObjekts ändert sich immer dann, wenn der Benutzer zu einer neuen URL navigiert.
Der useLocationHook kann praktisch sein, wenn Sie jedes Ereignis auslösen müssen, wenn sich die URL ändert.

Denken Sie daran, dass Sie die Aufrufe auf den Profilseiten der Benutzer verfolgen müssen. Sie können Änderungen im locationObjekt mit dem useEffectHook erkennen, der mit React geliefert wird.

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>
  );
};

Der useRouteMatchHook gleicht die aktive URL mit einem bestimmten Pfad ab, ähnlich wie die RouteKomponente funktioniert. Es ist ein sehr interessanter Haken; Sie können die unnötige RouteKomponente entfernen und auf das matchObjekt zugreifen.

Sie können den Pfad in der Routenkomponente der Benutzerseite jetzt einfach ändern in /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>
  );
};

Fazit

Hooks sind eine großartige Ergänzung des React-Ökosystems. Nachdem Sie nun etwas Code zur Handhabung des Routings mit Hooks gesehen haben, sind Sie bereit, das, was sie zu bieten haben, voll auszunutzen.

Bis zum nächsten Mal, bleiben Sie sicher und programmieren Sie weiter mit React Hooks!