📚 react router additional Hook & Component

以前のプレゼンテーションでは、reactrouterで主に使用されているコンポーネントと技術について説明しました.
主に使用されるだけでなく、reactrouterを使用して様々な機能を実現するために必要なhookやコンポーネントもあります.
このプレゼンテーションでは、追加のhookと構成部品について説明します.

📚 Hook & Component

react routerには2つのプログラミングされたパス転送方法がある。 useNavigate Navigate

上記のAPIは、パス転送をプログラミングしたい場合に使用します.
ここで、プログラム可能なのは、任意の論理を構築しながら経路移動を含むことである.
リンクやNavLinkなどの素子は、任意の経路に直感的に移動する機能を有する素子である.
しかし、userNavigateまたはNavigateは、任意の論理を構成する際に、ユーザが任意にパスを設定することができ、柔軟な操作を実現することができる.
たとえば、

formを発行し、特定の経路に移動させる

チェックボックスのチェックボックスは、特定のパスに移動するために使用できる

適切な情報を入力して移動

など、さまざまな状況に応じて特定のパスに移動できます.

1. useNavigate(imperative)

userNavigate hookは、必要なパスにナビゲートできる関数を返します。 const navigate = useNavigate() navigate("./home", { replace: true },{state : any});

useNavigateは、バージョン6以前のuseHistoryに代わって作成されたAPIである.

React Router's imperative API for programmatically navigating.

use

前ページまたは次ページに移動可能(インデックス使用)

特定経路へ移動

userNavigate hookは、必要なパスにナビゲートできる関数を返します.const navigate = useNavigate()最初のパラメータは、移動するパスを指定します.
インデックスを割り当てると、前のページ(-1)または次のページ(1)に移動できます.navigate("/dashboard") //specific route navigate(-1) //back navigate(1) //next

import React from "react";
import { Outlet, useNavigate } from "react-router-dom";

const LayOut = () => {
  const navigate = useNavigate();

  return (
    <div>
      <h1>Home</h1>

      <button
        onClick={() => {
          navigate("/dashboard");
        }}
      >
        Submit
      </button>
      <button
        onClick={() => {
          navigate(-1);
        }}
      >
        Prev
      </button>
      <button
        onClick={() => {
          navigate(1);
        }}
      >
        Next
      </button>
      <Outlet />
    </div>
  );
};

export default LayOut;

submitボタンをクリックしてダッシュボードパスに移動します.
Prevボタンをクリックして前のパスに移動し、Nextボタンをクリックして次のパスに移動します.
前のパスと次のパスにnavide()のパラメータとしてインデックスを割り当てることができます.
すなわち、前のパス(-1)
直接次のパス(1)
2番目のパラメータはオプションです.
state、replaceの2つのオプションを使用できます.{ replace?: boolean; state?: any } navigate("/dashboard" {replace : true},{state:any})state

Location State - A value that persists with a location that isn't encoded in the URL. Much like hash or search params (data encoded in the URL), but stored invisibly in the browser's memory. by location react router official Docs

state:state値を指定すると、そのパスに移動するとlocationします.state値を受け取ることができます.

例えば、login>settingに移動する際に使用したとするnavigate("/setting").
この場合、loginページの特定の値を使用する場合はstateに渡すことができます.navigate("/setting",{state:{id:myid,pw:mypw}})前述したように、state値を渡すことで、設定でlocationを使用してstate値をクエリーできます.
replace

replace:historyスタックに現在のパスは積み上げられません.
そのため、前のページに戻ると、前のパスに戻ります.

たとえば、home>dashboard>login>設定順にページを移動するとします.
このとき、loginページからsettingページに移動するためにloginコンポーネント内で使用するnavigate("/setting").
replaceプロパティが指定されていない場合は、ログイン後、設定の「戻る」をクリックしてログインページに戻ります.
しかしログイン後はログインページに戻る必要はありません.
この場合、loginページにnavigate("/setting",{replace:true})のようにreplaceを割り当て、ログイン後settingページで「戻る」をクリックすると、ログインページではなく前のダッシュボードページに戻ります.
したがって、replaceプロパティは、history stackに現在のページをスタックする必要はありません.前のページで置き換える場合に使用します.

2. Navigate(declartive)

Navigate構成部品は、レンダリング時に特定のパスに移動できます。 <Navigate to="/login" replace /> React Router's declartive API for programmatically navigating.

userNavigateとは異なり、関数ではなくコンポーネントにパスを移動します.
Navigateは通常、条件に従って特定の経路に移動するために使用される.
たとえば、ログインステータスauthedを示すステータスがあります.const [authed,setAuthed] = useState(false)authedがfalseの場合は、ログインコンポーネントに移動させます.{!authed && <Navigate to="/login"/>}authedがtrueの場合、この方法で構成部品をレンダリングできます.authedがfalseの場合、login構成部品に移動できます.
replace
userNavigateのreplace属性のように、必要に応じて選択的に使用すればよい.

useNavigate or Navigate?

userNaviagteはコマンドAPIであり、Navigateは宣言APIである。

Imperative? Declartive?
実施は直感的な傾向である.
無条件に機能を実行できます.
Declarityは叙事的な傾向です.
特定の条件に従って任意の機能を実行できます.
useNavigate(Imperative) Navigate(declartive)
userNavigateはインスタントNavigate APIです.
すなわち,特定の条件なしで経路移動が可能である.
たとえば、stateに基づいて構成部品をレンダリングおよび移動できますが、userNavigateはstateを書く必要がなく機能を実現できます.
NavigateはDeclarativeナビゲーションAPIです.
これにより、機能は特定の条件に基づいて動作することができる.
DeclarativeはReactが主張する核心原理の一つである.

by はんのうこう

React will efficiently update and render just the right components when your data changes 反応器はデータの変化に伴って素子を更新する。 Declarative views make your code more predictable and easier to debug. Declarative viewは、コードに予測性を持たせ、エラーの検出を容易にします。

Reactはstateに基づいて構成部品をレンダリングします.
React routerのNavigateは、状態の変化に応じてNavigateをレンダリングするというReactの原則のように宣言することもできる.
Reactがstateに基づいて要素をレンダリングするように、Navigateもstateに基づいてNavigateという要素を表示します.
(必ずしもそうではなく、このような論理からなる)
反応器が示す利点と同様に、ある状態に従って素子を更新することは、コードが論理的であり、追跡が容易であることを意味するようである.
userNavigateは、いくつかの機能(たとえば、イベントが発生した場合)を生成するために使用され、Navigateは、要素をレンダリングするときにパス移動するために使用されます.
コードコンテキストに応じて、両方から使用を選択できます.
より直感的に使いたい場合はNavigate Hook、インタラクティブなナビゲーションをしたい場合はNavigate素子を使うことができます.
参照:How to Programmatically Navigate with React Router

3. useLocation

The useLocation() hook provides us access to the browser's location object. useLocation hookでは、locationオブジェクトにアクセスできます。

location objectなんですか?

位置は?

The browser has a location object on window.location. It tells you information about the URL but also has some methods to change it: This is a React Router specific object that is based on the built-in browser's window.location object. It represents "where the user is at". It's mostly an object representation of the URL but has a bit more to it than that. by location react router official Docs

location objectはwindowです.locationベースのオブジェクトはurlに関する情報だけでなく、メソッドを変更できる機能もあります.
window.locationはreactrouterでは使用できないため、location APIを使用してより使いやすくすることができます.
location objectには、次の形式があります.
location object

{
  pathname: "/bbq/pig-pickins",
  search: "?campaign=instagram",
  hash: "#menu",
  state: null,
  key: "aefz24ie"
}

{pathname,search,hash}はwindowです.locationの機能と同じです.
3つの機能を問い合わせるとURLに関する情報が得られます.
{state,key}は特殊です.
pathname
URLのデフォルトパスの後ろのアドレス.https://example.com/teams/hotspursURLがある場合/teams/hotspurspathnameです.
search location.search・search params・URL search params・query string・様々な用途に使用される.
react routerではlocationです.検索に使用します.
URLの後ろにqueryをインポートするために使用します.https://example.com/teams/hotspurs?campaign=instagram中
query => ?campaign=instagramhash
サーバを要求することなくURLを操作することができますが、今日では、必要なスクロール位置に送信するなどの設計要素としてよく使用されています.https://example.com/#hash => #hashstate
stateとは、その位置に入ったときの状態値です.
これは本来history.stateとして設定・照会されているが、この機能は反応ルータでは使用できない.
したがって、react routerは、stateがlocation objectでクエリーできるようにします.
stateはurlに表示されず、urlに関する情報を安全に共有できます.
stateは主に、次のパスに移動するときに前のパスのデータを渡すために使用されます.
stateはLinkまたはNavigateで使用されます.

<Link to="/pins/123" state={{ fromDashboard: true }} />;

let navigate = useNavigate();
navigate("/users/123", { state: partialUser });

次のページでステータスを問い合わせることができます.

let location = useLocation();
location.state;

key
各ページの位置には独自のキーがあります.

useLocation

従って、上記位置決め機能を使用するために、useLocation hookを使用することができる.
useLocationはこのページにlocationオブジェクトをロードします.const location = useLocation上図に示すように、locationでは様々な機能が使用されていることをクエリーできます.