[React] 4. Link, Switch, History

페이지 이동하는 버튼 만들기

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

Link 태그를 작성한뒤 옵션으로 to="/경로"를 주면 된다
홈화면에 링크가 생겼고 누를때마다 해당 페이지로 잘 이동한다ㅎㅎ

다른 방법으로 페이지를 이동할수도 있다

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

우선 Detail 컴포넌트에 뒤로가기 버튼을 하나 만들었다

useHistory

방문기록등을 저장해놓는 오브젝트

import { useHistory } from "react-router-dom";
.
.
let history=useHistory();

이제 history변수안에 방문기록이 다 담길것

<button
          className="btn btn-danger"
          onClick={() => {
            history.goBack();
          }}

          뒤로가기
        </button>

onClick옵션에 goBack() 함수를 써주면 눌렀을때 진짜 뒤로간다!!!
특정 경로로 이동시키고 싶으면 push함수를 써준다

<button
          className="btn btn-danger"
          onClick={() => {
            history.push('/');
          }}

          뒤로가기
        </button>

누르면 진짜 홈으로간다!!!!!

Switch 컴포넌트 알아보기

<Route path="/:id">
	<div>아무거나 보여줌</div>
</Route>

여기서 /:id는 /모든문자 라는 경로를 의미한다

매칭이 되면 다보여주기때문에 지금도 다보임
여러개가 맞아도 한번에 하나만 보이고 싶을때는 이때 Switch를 쓴다!!!

<Switch>
        <Route exact path="/">
          <div className="background">
            <h1>20% Season Off</h1>
            <p>안녕하세요</p>
            <button type="button" class="btn btn-primary">
              Learn more
            </button>
          </div>
.
.
.
</Switch>

Route들을 switch태그로 감싸주기만 하면 된다

이제 Route들이 하나씩만 보인다ㅎㅎ

출처 : https://codingapple.com/ (코딩애플님 리액트 강의)