パスパラメータの使用方法

スタティツクルーティング

これまでのルータの作成方法は以下の通りであった.しかし、これは規定された状況に対してしか経路を表現できません!つまり、Loginコンポーネントを表示するには、自分で「/login」というアドレスを設定し、別のページでLoginに移動するときに「/login」と同じフォーマットで指定したpathを書かなければなりません.これを정적라우팅(static)と言います.

function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/" element={<Main />} />
        <Route path="/product-list" element={<ProductList />} />
        <Route path="/product-detail" element={<ProductDetail />} />
      </Routes>
    </BrowserRouter>
  );
}

では、多くのページのパスを1つ1つRouteに指定する必要がありますか?

もちろん違います!商品の全ページ、商品の詳細ページがあれば、詳細ページをクリックしたと言います.誰だ?
1)表示される構成部品は同じで、異なる入力データしか表示されません.
2)urlの末尾に入る番号だけが違います.

urlを表示すると、urlの最後に特定のid値(/32692、  /53424)では、id値に応じて異なる詳細ページが表示されます. id値に基づいて、無数のurlが表示され、各urlはパスの形式と数を事前に決定できません.

つまり、URLにアクセスするIDを変数のように扱う必要があります.

このような非静的で動的なルーティングについて ダイナミックルーティング(Dynamic Routing)と呼ばれます.

は、2つの概念(Path Parameter、  Query Parameter).

2-1. Path parameter

ページ全体(複数のカードがリストされている)の構成部品をクリックして、ページにジャンプしてみました.どうすればいいですか.

function Card(props) {
  const navigate = useNavigate();
  const goToDetail = () => {  //(2)
    navigate(`/monsters/detail/${props.id}`);
  };

  console.log(props);

  return (
    <div className="cardContainer" onClick={goToDetail}> // (1)
      <img
        src={`https://robohash.org/${props.id}?set=set2&size=180x180`}
        alt=""
      />
      <h2>{props.name}</h2>
      <p>{props.email}</p>
    </div>
  );
}

(1)onClick関数をアクティブな場所に掛ける.
(2)onClickで展示したい場所にナビゲーションを接続する.この時の道具idを渡すには
ここからurlが変更されていることがわかります.ただし、ルーティングで個別に指定していないため、ページは表示されません.もしそうなら、今すぐルートを接続する必要があります.

<Route path="/monsters" element={<UrlParameters />} />
<Route path="/monsters/detail/:monsterId" element={<MonsterDetail />} /> (3)

(3)カードをクリックしたときに/monsters/detail/${props.id}のURLに移動させたのでprops.idを受信する部分をルーティングに追加する必要があります.したがって、detail/の後に:monsterIdを指定し、表示する構成部品に接続する必要があります.
今、モンスターエレメントを接続しました!でも、欲しい!!私が注文した怪物の情報が出てこない!もちろん、だって!このモンスターの情報をロードしていないからです!今、urlのmonsterIdに私が伝えて、detailsページからモンスターの情報を取得します.

const [monster, setMonster] = useState({});
const params = useParams();  // (4)
useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/users/${params.monsterId}`)//(5)
      .then((res) => res.json())
      .then((res) => setMonster(res));
  }, [monster]);

(4)useparamsを用いてルーティング中のオブジェクトを受信することができる.useParamsを上に書いてコンソールにparamsを印刷します.console.log(params)を撮影すると、コンソールウィンドウに表示される値はmonsterId : 1と同じであることがわかる.
(5)だからparams.モンスターIdをfetchに入れる.
ここでは、画面に完璧に表示されるように見えますが、そうではありません!**これは、USEffectの実行順序に従って、スクリーンをレンダリングするときに無条件に1回実行することが重要です!そのため、上にのみ実行すると、画面に以前のデータが表示され、点滅して欲しいデータが表示されます!やったように見える.したがって、このセクションは&&演算子を使用して処理され、データがある場合にのみレンダリングされます.

return (
    <div className="urlParameters">
      {monster.name && ( (6)
        <>
          <div className="btnWrapper">
            <button onClick={goToMonsterList}>Back to Monsters List</button>
          </div>
          <Card name={monster.name} email={monster.email} id={monster.id} />
          <div className="btnWrapper">
            <button onClick={goToPreviousMonster}>Previous</button>
            <button onClick={goToNextMonster}>Next</button>
          </div>
        </>
      )}
    </div>
  );

(6)&条件付きレンダリング処理には演算子を使用する必要があります.
そうしないと、データ型が違うと画面がレンダリングされない可能性があります^ㅠ