Reactルーターフック

ルーティング用にフックが追加された理由を理解したところで、フックの動作を見てみましょう。

useParams

useParamsフックは、動的URLで渡されるパラメータのキーと値のペアを含むオブジェクトを返します。

たとえば、URLのパラメータとしてUserを受け入れるページコンポーネントがあるidとします。

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

useHistoryフックは返すhistoryルータがルート変更を処理するために内部的に使用するオブジェクトを、。このhistoryオブジェクトは、セッション履歴の管理に使用されます。

たとえば、このhistory.push()メソッドを使用して、履歴スタックに新しいエントリを追加し、現在のルートからユーザーをナビゲートできます。

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

useLocationフックは、あなたがアクセスすることを可能にするlocationアクティブなURLを表すオブジェクトを。locationオブジェクトの値は、ユーザーが新しいURLに移動するたびに変更されます。あなたはURLが変更するたびにすべてのイベントをトリガする必要があるとき、フックが便利です。
useLocation

ユーザーのプロファイルページのビューを追跡する必要があることを考慮してください。Reactに付属locationのuseEffectフックを使用してオブジェクトの変更を検出できます。

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

useRouteMatchフックは、同様に方法に、指定されたパスを有する活性URLに一致するRoute成分作品。それは非常に興味深いフックです。不要なRouteコンポーネントを取り除き、matchオブジェクトにアクセスできます。

これで、ユーザーページのルートコンポーネントのパスを次のように変更できます/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>
  );
};

結論

フックはReactエコシステムへの素晴らしい追加です。フックを使用したルーティングの処理に関するコードをいくつか見てきたので、フックが提供するものを最大限に活用する準備が整いました。

次回まで、安全を確保し、React Hooksでコーディングを続けてください！