TIL 24. Dynamic Routing

まず、ダイナミックルーティングを理解する前に、リストがある場合は、何をクリックしているのか疑問に思うかもしれません.❓
今やっているプロジェクトのRoute.jsを見てみましょう.

コードから見ると、exact pathを介して指定されたコンポーネントに移動します.

動的ルーティングとは

Routeのパスに特定の値を追加すると、ページ(ダイナミックルーティング)にナビゲートできます.

React Routerでは、2つの方法でストリームルーティング機能を実現することができる。

Query parameters

URL parameters

Routeに設定された構成部品の3つのprops

Routeに設定したcomponentは3種類のpropsを取得します

history

は、このオブジェクトを介して他のパスにプッシュ、置換、または前後のページに切り替えることができます.

classでthis.props.history.push('/page')で移動できる理由!

location

このオブジェクトには、現在のパスに関する情報と、URLクエリ(/company list?category=3)に関する情報が含まれます.

match

このオブジェクトには、どのルーティングに一致するかに関する情報とparams(/会社detail/:id)情報が含まれます.

ログイン成功時にホームページを移動

にログインしようとすると、APIと通信してトークンがあるかどうかを確認してください.

トークンはローカルストレージに格納、

/MainアドレスへのURLを設定します.

もし/Mainの後ろにいたら?category=3を合わせて/Main?category=3とはどういう意味ですか?
つまり、登録が成功したときに/Main?category=3アドレスに移動するURLを設定することは、メイン画面に最初にアクセスしたときに対応するデータを画面に表示することを意味します.

ここで使用する方法はQuery Parameters 100\

🔥 Query Parameters

❓ location
このオブジェクトには、現在のパスに関する情報と、URLクエリ(/Main?category=3)に関する情報が含まれます.

🔥 URL Parameters

❓ match

このオブジェクトには、どのルーティングに一致するかに関する情報とparams(/会社detail/:id)情報が含まれます.

🚨 注意:URLクエリーでは、構成部品内で動的に使用できます.paramsでは、使用する前にルーティングで指定する必要があります.

2つの方法はいつ使えばいいですか?

String parameters

ページに複数の情報が必要な場合、

Queryパラメータを使用する場合は、ルートを選択します.

、jsの修正が必要でメンテナンスが悪いと判断した場合

をフィルタする場合は、

を使用します.

Query parameters

固有のリソースを識別したい場合.

/users // 사용자 전체의 목록을 가져온다.
/users/123 // id 값이 123인 사용자를 가져온다.
/users?job=programer // 필터링 >>> 직업이 프로그래머인 사용자 목록만 가져온다.