210709 React Router(2)

상세페이지를 다른 파일에서 컴포넌트화 하기

src 폴더 밑에 detail.js를 만들어 detail 컴포넌트를 가져온다.

/* 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 하겠다는 의미!

index.js에서 import 해 온 다음 똑같이 사용하면 됨!

import Detail from './detail.js';

..

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

버튼으로 이동하기(Link, History)

• navbar의 home을 누르면 메인페이지로, detail을 누르면 상세페이지로 이동하게 해보자. (nav안의 코드를 조금만 바꿔주면 됨)

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

• 링크말고 버튼을 눌러서 이동하고 싶다면
  상세페이지에 뒤로가기 버튼 만들기

  useHistory라는 훅을 사용한다. (import해서 사용)
  import 코드: import { useHistory } from 'react-router-dom';
  변수 선언 코드: let history = useHistory();
  방문기록 등을 저장해두는 object

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

이렇게 버튼을 하나 만들어서 goBack()함수를 써주면 된다.

특정 경로로 이동시키려면

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

switch

url 중복 매칭을 허용하지 않는다. 맨 위에 하나만 보고 싶을 때 사용.
Route들을 Switch 태그로 전부 감싸주면 됨.
이전에 사용했던 <Route exact path="/">가 필요 없다.

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