React Router Hooks

Teraz, kiedy rozumiesz, dlaczego hooki są dodawane do routingu, zobaczmy, jak hooki działają.

useParams

Hook useParamszwraca obiekt zawierający pary klucz-wartość przekazanych parametrów w dynamicznym adresie URL.

Załóżmy na przykład, że masz Userskładnik strony, który akceptuje idjako parametr w adresie 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>
  );
};

Hooki useHistoryzwracają historyobiekt, którego router używa wewnętrznie do obsługi zmian trasy. Obiekt historysłuży do zarządzania historią sesji.

Na przykład możesz użyć history.push()metody, aby dodać nowy wpis do stosu historii i nawigować użytkownika z bieżącej trasy:

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

useLocationHook umożliwia dostęp do obiektu location, który reprezentuje aktywny adres URL. Wartość locationobiektu zmienia się za każdym razem, gdy użytkownik przechodzi do nowego adresu URL.
Hook może być wygodny , useLocationgdy musisz wyzwolić dowolne zdarzenie za każdym razem, gdy zmieni się adres URL.

Weź pod uwagę, że musisz śledzić wyświetlenia na stronach profilów użytkowników. Możesz wykryć zmiany w locationobiekcie za pomocą useEffecthooka, który jest dostarczany z Reactem.

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

Hook dopasowuje aktywny adres URL do useRouteMatchpodanej ścieżki, podobnie jak Routedziała komponent. To bardzo ciekawy hak; możesz pozbyć się niepotrzebnego Routekomponentu i uzyskać dostęp do matchobiektu.

Możesz teraz zmienić ścieżkę w komponencie trasy strony użytkownika na po prostu /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>
  );
};

Wniosek

Hooki są świetnym dodatkiem do ekosystemu React. Teraz, gdy znasz już trochę kodu na temat obsługi routingu za pomocą hooków, możesz w pełni wykorzystać to, co mają do zaoferowania.

Do następnego razu zachowaj bezpieczeństwo i kontynuuj programowanie dzięki hakom React!