210709 React Router(2)

別のファイルで詳細ページをコンパイルするには、次の手順に従います。

/* detail.js */
import React, {useState} from 'react';

function Detail(){
  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">상품명</h4>
        <p>상품설명</p>
        <p>120000원</p>
        <button className="btn btn-danger">주문하기</button>
      </div>
    </div>
  </div>
  )
}

export default Detail;     // detail을 export 하겠다는 의미!

import Detail from './detail.js';

..

      <Route path="/detail">
            <Detail/>
      </Route>

ボタン(Link,History)に移動

              <Nav.Link> <Link to="/">Home</Link></Nav.Link>
              <Nav.Link> <Link to="/detail">Detail</Link></Nav.Link>

<button className="btn btn-danger" onClick={()=>{history.goBack()}}>뒤로가기</button>

<button className="btn btn-danger" onClick={()=>{history.push('경로')}}>뒤로가기</button>

switch

<Switch>
	<Route></Route>
    ...
</Switch>