ルート

ルーティングとは、ページングの方法です.

ルータの設定

ルーティングのためにreact-router-domというライブラリを使用する必要があります.
端末に入力:
yarn add react-router-dom@5
ルータはindexに設定されています.jsファイルで完了できます.
index.jsはAppです.jsの構成部品のインデックスを作成します.htmlを入れる役割を果たしました.
したがってhtmlをルーティングするにはindexを選択します.jsを修正する必要があります.

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  </React.StrictMode>
  document.getElementById('root')
);

react-router-domライブラリをインポートし、BrowserRouterコンポーネントを追加します.
BrowserRouter VS HashRouter
ルーティングにはHashRouterも使用できます.
両者の違いは警備上の理由にある.
BrowserRouterを使用し、urlはlocalhost:3000で始まります.
逆に、HashRouterは同じ画面ですが、localhost:3000/#/と同じように#が追加されます.
これは、ブラウザのアドレスウィンドウの役割のためです.
Urlはサーバにページを要求する役割を果たす.
HashRouterは#の後のすべての内容を無視するため、サーバにエラーアドレスを要求することを避けることができます.

ルート

今はホームページのアプリしかありませんjsを見てください.
todo
1.ホームページは/接続時のみ表示されます.
2/detail接続なら、ページを詳細ページにしましょう.

  import { Link, Route, Switch } from 'react-router-dom';

ルーティング用のタグが複数インポートされました.
ルーティングのために、まず<Route>タグが使用される.

function App(){
return (
  <div>
...
    <Route path="/"> 
      <div>메인페이지에요</div>
    </Route>
    <Route path="/detail">
      <div>디테일페이지에요</div>
    </Route>
  </div>
)
}

前述したように、Routeタグでpathプロパティを使用してアドレスを指定できます.

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

<div>の代わりに素子を用いて特定のアドレスに接続する場合、素子を表示してもよい.
ルータの特性
実際、ルータはページごとに異なるhtmlを表示するわけではありません.
htmlの内容を変更しながら異なる内容を表示するだけです.
したがって、各ルータラベルの内容は、次のように1つの画面に表示される可能性があります.
このような理由は、/というpathがホームページの/pathにも、「毎日」ページの/detailpathにも含まれるためである.
パスが完全に一致している場合にのみ表示されます.

<Route exact path="/"> 
<div>메인페이지에요</div> 
</Route> 

以上のように、正確な属性を付与すればよい.

リンクタグ

react-router-domからインポートされたリンクコンポーネントについて説明します.
リンクラベルには、aラベルと同様の機能があり、ページの移動経路を指定できます.

function App(){
return (
  <div>
    <Navbar>
       <Nav.Link> <Link to="/">Home</Link> </Nav.Link>
       <Nav.Link> <Link to="/detail">Detail</Link> </Nav.Link>
    </Navbar> 
    ...
  </div>
)
}

ラベルの使い方は上記の通りです.

ページの移動を担当する文字をリンクラベルで包みます.

toプロパティを使用してパスを記録します.

useHistoryラベル

useHistoryコンポーネントはreact-router-domでも使用できます.
useHistroyラベルにはアクセスレコードが含まれています.
つまり、後退などの機能を実現するには、多くのパスを直接使用することができます.

  // 임포트
import { useHistory } from 'react-router-dom';

function Detail(){
  // 방문기록을 저장할 오브젝트 선언.
  let history = useHistory();
  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6 mt-4">
          <h4 className="pt-5">상품명</h4>
          <p>상품설명</p>
          <p>120000원</p>
          <button className="btn btn-danger">주문하기</button> 
          <button onClick={()=>{ 
            	history.goBack() 
            }} className="btn btn-danger">뒤로가기</button> 
        </div>
      </div>
  </div>  
  )
};

useHistoryの使用例を表示します.
上のhtmlは、/ホームページに/detailパスを入力したときに表示される詳細ページです.
後退ボタンをクリックして後退関数を実行させます.
履歴変数は、インポートしたuseHistoryからアクセスしたレコードを格納します.
goBack()関数を起動し、パスを書く必要がなく前のページに直接ジャンプできます.

スイッチラベル

Switchタグには、Routhタグのpathに重複するタグがある場合でも、Routhタグが1つしか表示されません.

function App(){
return (
  <div>
    <나머지HTML/>
    <Route exact path="/">
      어쩌구
    </Route>
    <Route path="/detail">
      <Detail/>
    </Route>
    <Route path="/:id">
      <div>새로 만든 route입니다</div>
    </Route>
  </div>
)
}

//:idはURLパラメータを表し、後ろに文字があればルーティングを表示します.
したがって、/detailパスにナビゲートすると、/detailと/:idの2つのルーティングが表示されます.
この場合、1つのRouthを表示するために、以下のようにすべてのRouthタグをSwitchで囲むことができます.

function App(){
return (
 <div>
   <나머지HTML/>
   <Switch>
     <Route exact path="/">
       어쩌구
     </Route>
     <Route path="/detail">
       <Detail/>
     </Route>
     <Route path="/:id">
       <div>새로 만든 route입니다</div>
     </Route>
   </Switch>
 </div>
)
}

URLパラメータを使用した複数の詳細ページの作成

まずURLアドレスを考えてみましょう
3つの商品があり、次のルートに移動するときは、各詳細ページを表示させます.

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

function App(){
return (
 <div>
   ...
     <Route path="/detail/:id">
       <Detail shoes={shoes}/>
     </Route>
 </div>
)
}

前述したように、コロンはid位置にどの文字が現れても<Detail>素子を表示することを示す.

idという部分は、関数名のように自由に記述できます.

パラメータは複数追加できます.
ex)/detail/:id/:name

import React from 'react';
  // useParams추가
import { useHistory, useParams } from 'react-router-dom';
  
function Detail(props){
  // useParams 변수에 저장
  let { id } = useParams();
  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
        </div>
        <div className="col-md-6 mt-4">
          <h4 className="pt-5">	
            {props.shoes[id].title}</h4>
          <p>{props.shoes[id].content}</p>
          <p>{props.shoes[id].price}원</p>
          <button className="btn btn-danger">주문하기</button> 
        </div>
      </div>
  </div>  
  )
};
export default Detail 

Detail.jsを見てください.
useParamsが追加されました.
userParamsは、URL内のすべてのパラメータ、例えば{パラメータ1、パラメータ2、}を格納する関数です.
すなわち,{id}はdetail/:idのid文字をパラメータとしてインポートする.

追加

商品の順番が変わったらどうしますか?
0番目のルートに入ると、いつも同じ商品が出てきますが、商品の順位が変わると、0番目の商品が3番目のルートの商品に出てくる可能性があります.
したがって,データバインドを行う際には,商品のidのように固有番号の数字をパラメータとして同一商品を常に可視化することができる.
例を見てみましょう.

{
    id : 0,
    title : "White and Black",
    content : "Born in France",
    price : 120000,
    img : "https://codingapple1.github.io/shop/shoes1.jpg"
  },

  {
    id : 1,
    title : "Red Knit",
    content : "Born in Seoul",
    price : 110000,
    img :  "https://codingapple1.github.io/shop/shoes2.jpg"
  },

  {
    id : 2,
    title : "Grey Yordan",
    content : "Born in the States",
    price : 130000,
    img : "https://codingapple1.github.io/shop/shoes3.jpg"
  }

以上の商品データには商品固有番号idがあります.
つまり、商品の順番ではなく、唯一の番号を/:idに入れればよい.
JavaScript ES 6のfind()構文を使用してみます.
filer()関数または繰り返し文を使用できます.

import React from 'react';
import { useHistory, useParams } from 'react-router-dom';

function Detail(props){

let { id } = useParams();
let 찾은상품 = props.shoes.find(function(상품){
  return 상품.id == id
});

return (
  <div className="container">
    <div className="row">
      <div className="col-md-6">
        <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
      </div>
      <div className="col-md-6 mt-4">
        <h4 className="pt-5">{찾은상품.title}</h4>
        <p>{찾은상품.content}</p>
        <p>{찾은상품.price}원</p>
        <button className="btn btn-danger">주문하기</button> 
      </div>
    </div>
</div>  
)
};

export default Detail 

find()は、Arrayで必要な資料を検索するために使用されます.

find()は配列の後ろにあり、コールバック関数を記述する必要があります.

コールバック関数は、配列内の各データを表します.
つまり、商品ごとにそれぞれの商品情報があります.

returnは条件式を加えることができます.
商品のidを変数に格納し、:/idパラメータで貼り付けた文字など.
フロントはすべてのデータを処理するので、通常は繰り返しクエリのようなfind()の関数を使用するが、実際にはAjaxを介してid:0の商品データをサーバに要求するのが一般的である.
この場合、findではなくajaxを要求するコードを記述し、応答するデータを{}に入れるだけでよい.