페이지 이동하는 버튼 만들기
.
.
<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>
누르면 진짜 홈으로간다!!!!!
<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/ (코딩애플님 리액트 강의)