Web開発勉強日記 🧸その2🧸

前回の投稿からだいぶ時間が経ってしまった・・・
本業が忙しくなかなか学習できずにいました🥹
今日から連休！！ということもありガッツリアプリ開発の学習を進めていきます( ＾∀＾)

今回からは学んだ内容を具体的に書き残していきます！
アウトプットすることで、より理解が深まると良いな〜なんて思ってます。

あ、関係ないけどサムネはDALL-3に作ってもらいました笑

本日の学び✍️

主にURLパラメーター、クエリパラメーター、ページ間でのStateの受け渡しを学びました。

URLパラメーター💡

URLパラメーターとは、特定のディレクトリやリソースにアクセスするのに必要な値のこと。
たとえば、ECサイトを例に説明してみる。

https://www.onlinestore.com/products/macbook

このURLでは「/macbook」がURLパラメーターとなる。
つまり、ECサイトの中のMacBookの商品詳細ページに直接アクセスする際に使用される。
URLパラメーターを使用するには、pathに「/:id」を指定する必要がある。

import { Page2 } from "../Page2";
import { UrlParameter } from "../UrlParameter";

export const page2Routes = [
  {
    path: "/",
    exact: true,
    children: <Page2 />,
  },
  {
    path: "/:id",
    exact: false,
    children: <UrlParameter />,
  },
];

このように配列の中でpathプロパティにidを指定することで、動的にページの遷移ができるようになる。

クエリパラメーター💡

特定のデータをフィルタリングまたはソートした結果に基づいて情報をリクエストする際に使用する。
たとえば、こちらもECサイトを例に取ってみる。

https://www.onlinestore.com/products?category=books&sort=price_asc

こちらは「?category=books&sort=price_asc」の部分がクエリパラメーターとなる。
商品一覧を取得→カテゴリーが「本」に一致　且つ　価格でソート
した結果が情報としてリクエストされその結果が画面に表示される。

具体的な使用方法は、

import { useLocation } from "react-router-dom";

export const UrlParameter = () => {
  const { search } = useLocation();
  const query = new URLSearchParams(search);

  return (
    <div>
      <p>クエリパラメーターの値は{query.get("name")}です</p>
    </div>
  );
};

1. useLocation()フックを使用する
   useLocationフックを使用することで、URLに設定されているロケーションオブジェクトにアクセスできる。

2. useLocationで取得したロケーションオブジェクトのseacrhプロパティをURLSearchParamsクラスを使用して文字列の取得を行う。

3. URLSearchParamsクラスに用意されているpushメソッドで取得したsearchプロパティの値を取得する

ページ間でStateを受け渡し💡

たとえば・・・
親コンポーネントで生成した変数や配列を子コンポーネントでも使用したい。
そんな時は・・・

export const Page1 = () => {
  const arr = [...Array(100).keys()];
  return (
    <div>
      <h1>Page1です</h1>
      <Link to={{ pathname: "/page1/detailA", state: arr }}>DetailA</Link>
    </div>
  );
};

1. 親ページで配列を生成する。

2. Linkタグのtoの第二引数でstate:を定義することでLink先に配列が受け渡される。

↓子コンポーネント

import { useLocation, useHistory } from "react-router-dom";

export const Page1DetailA = () => {
  const { state } = useLocation();
  console.log(state);
  return (
    <div>
      <h1>Page1DetailAです</h1>
    </div>
  );
};

1. 子コンポーネントにおいて、分割代入にてuseLocationフックをstateに展開する。

2. コンソールでstateを出力すると、継承した配列が出力されます。

まとめ🙆‍♂️

React Routerは実際にアプリ開発などで使用してみないといまいち使い方が分かりませんでした😇でも、時間はかかりましたが概念は理解できたので早く実践で試してみたいです！！

では( ＾∀＾)