ショッピングモールプロジェクト(Router)

これはアップル社のスピーチに基づいた文章です.

ページング方式

ルーティング:ページング
=react-router-domライブラリ
yarn add react-router-dom@5またはnpn install react-router-dom@5
react-router-dom初期設定方法

index.「react-router-dom」からjsをインポートします.入力
(importセクションのパスに./がなく、名前のみの場合は、ライブラリ名とみなすことができます.)

<BrowserRouter></BrowserRouter> 로 <App/>을 감싸준다.

など)HashRouterも利用できます.このルータはルーティングの安全を確保するのに役立ちます.このルータを使用する場合、サイトアドレスの後ろに#を付けますが、#の後ろに書いてあるものはサーバに転送されません.(ex.localhost:3000/#/~~そのため、反応器は自分でルートを手配します.逆に、BrowserRouterは、応答ではなくルーティング要求をサーバに送信する可能性があります.危険でエラーが発生した場合、存在しないページをサーバに要求し、404 Page Not Foundでこのエラーが発生する可能性があります.サーバ上でサーバのルーティングを防止するAPIを作成する必要があります.これはバックエンド開発者と検討すればいいです.

ページング

ホームページ

商品詳細ページ

import(の単語はHTMLのタグで、コンポーネントと同じです.)

次のコードで記述します.
(参照)BrowserRouterはindexとしてマークされています.jsでアプリケーションを適用します.js自体を包んでいるので、次のコードのように別途縛る必要はありません.)
decompactでは、ページを表示するには、パスの正しいパスに従って作成する必要があります.
ない場合は、/と/詳細で/が共にアクセスするため、ホームページと詳細ページが同時に表示されます.

ちょっと待って)pathパスで入力すると素子をオフセットできるので、読みやすさが良いです.
通常、RouteではHTMLコードが書かれていますが、上に書いたコードと同じコードがよく見えます.

<Route path="/어쩌구" component={Card} ></Route> 
<Route path="/어쩌구"> <Card/> </Route> 

また、React-Routerの特徴は、ページごとに異なるHTMLファイルが表示されているわけではありません.
内部の内容を変えて展示して、まるでページを変えたかのようです.
ファイルを見るとindexなのでhtmlは1つしか存在しません.

変換ページをクリック

これまで、アドレスウィンドウに/または/詳細を直接入力してきましたが、クリック時にページを変換するボタンUIを作成することができます.
react-router-domを以前にインポートした場合、{}のラベルは次のように使用できます.

<Link></Link>

使用します.

HomeとDetailを使用してナビゲーションバーのボタンを作成します.

<Link to ="경로"></Link>

に設定します.

しかし以下のようなエラーが発生し、しばらく悩んだ.

Invariant failed: You should not use <Link> outside a <Router>

簡単な説明は、私が今使っているリンクラベルがルータの外で使われていることです.
ここで注意したいのは、ルータに関連するタグを使用する場合は、ブラウザで使用する必要があります.私のコードでは、ナビゲーションラベルはブラウザの外に存在し、中にコードを書くとよく解決されます.

ルータ-履歴APIを使用してURLとUIを同期するルータ

Route-エレメントのプロパティで設定したURLが現在のパスと一致する場合、対応するエレメントと関数がレンダリングされます.
-リンク-aラベルに似たラベル.プロパティで設定したリンクに移動します.レコードは履歴スタックに保存されます.

スイッチ-サブ構成部品ルーティングまたはRedirectに一致する最初の要素をレンダリングします.BrowserRouterのみを使用する場合とは異なり、Switchは一致する要素を1つだけレンダリングします.チェックマークが付いていない場合は、すべての一致をレンダリングします.

ほかの方法

ボタンをクリックするとすべてのものにリンクするのは効率的ではありません.
たとえば、コード実行中にページを移動したい場合は、必要に応じてページ移動関数を使用します.
そこで、例としてDetailページに戻るボタンを作成します.
userHistoryという名前の機能をインポートし、history変数に格納します.
useHistoryは、ページ移動履歴と有用な関数を格納するHookです.

歴史もあります.goBack(); 後退機能を実現するために使用します.

それ以外にも、ページ移動に役立つ関数がたくさんあります.
その中で最も多く使われている関数は.Push(「移動するパス」)です.その名の通り、特定の移動経路に移動します.

スイッチコンポーネント

スイッチング素子の表示効果は、書き込み精度と同じです.通常、ホームページは「/」に設定され、残りのページは「/detail」と同じフォーマットに設定されます.exceptまたはSwitchを使用しない場合は「/」のみが認識され、それを含むすべてのコンポーネントが再レンダリングされます.
したがって、SwitchはRouteによって作成されたサブアセンブリから最初のRouteをレンダリングします.
注意:https://velog.io/@hoon_dev/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0Route-Link-Switch-5

など)

詳細ページでは、商品情報も靴の状態のデータから取得します.
Appは親コンポーネントであり、propsでDetailにデータを送信してバインドできます.
重要だ!!!
最初にDetail素子に靴stateを作ればいいんじゃないですか?
データは常に上から下へ移動します.
各コンポーネントは、必要なデータを作成できますが、他のコンポーネントのデータが必要な場合は、データを取得しようとします.
したがって、親コンポーネントはすべての重要なデータを持ち、サブコンポーネントからデータを受信するのが最善の方法である.

URLパラメータ

3つの詳細ページを作成
まずURLアドレスから考えて、以下の詳細を作成することができます.

/detail/0으로 접속하면 0번째 상품의 상세페이지
/detail/1으로 접속하면 1번째 상품의 상세페이지
/detail/2으로 접속하면 2번째 상품의 상세페이지

しかしながら、詳細が多ければ、ハードコーディング方式で上記の内容を記述することは限界がある.
そのため、
/detail/:id:URLパラメータ構文、すべての文字を受け入れるURL命名法を表す
1.コロンの後に勝手に名前をつける
2.複数使用可能
では、実際には、0であれば、0番目の商品が現れるようにデータをバインドする必要があり、1であればデータをバインドする必要があります.
したがって、データバインディングは、次の概念から実現されます.

実際には、それを実現できるものがあります.それはuseParams()です.
上部でimportを使用してuserParamsをインポートし、変数に格納します.

userParams()関数は、現在のURLのすべてのパラメータ{パラメータ1、パラメータ2...}をちょぞう
これはdestructing構文を用いてそれぞれ変数として格納される.
したがって、idという変数は、idビット上の数字を意味する.
ex)/detail/1で接続されている場合、id変数は1です.
/detal/100に接続されている場合、id変数は100です.

など)

/detal/0は0番目の商品Aを表示します.しかし、ホームページで、価格ソートのようなソート機能が、0番目の商品をBに変換するように、靴類stateの並び順が変わったとしたら?しかし、0番目の商品は必ずAに見せなければなりません.したがって、データをバインドするときに永続番号を使用できます.商品情報を含むデータ.jsを見ると、商品の対象ごとにidがあります.

この問題を解決するためにfind()関数を用いることができる.
Arrayで欲しい資料を見つけたい場合は、それを使用することができます.
簡単に言えば、配列中の永久id番号が[0,1,2]の順に商品を並べば良いのですが、[2,0,1]と混ざってfind()関数を使って検索することもできます.

find()はarrayの後ろに貼ることができ、コールバック関数が入っています.

コールバック関数のパラメータxは、配列内の各データを表す.

returnの右側に条件式を書くことができ、これらのデータだけが新しい変数に格納されます.

条件式現在のURLの/:idの値と商品の永久番号(x.id)が同じかどうかを比較します.

つまり、私は今/detail/0を検索して、Aという商品を見たいです.このとき,userParams()により,0というパラメータがid変数に格納される.また、その値が商品(x)の永久番号0と同じであれば返す.もう一度言うと、ランキングの0番目の商品は商品Aが選ばれたからではなく、永久番号が0だったから選ばれたのです.ソート機能により、0番目の商品にA以外の商品が登場する場合があります.

注意!

現在,フロントエンドはすべてのデータを処理し,困難な+繰返しfind()関数を用いる.
実際の開発では,ID:0の商品データをAjaxとしてサーバに要求する場合が多い.
ではそうfind()とか書くのではなくajaxを要求するコードが含まれています.
ajaxリクエストが成功すると、{}のカッコには商品データが1つしかありません.