라우팅: 페이지를 여러개 만드는것 (react-router-dom 이용)
커맨드창에 yarn add react-router-dom@5 입력해서 라이브러리 설치
react-router-dom 초기 세팅방법
//index.js import { BrowserRouter } from "react-router-dom"; ReactDOM.render( <React.StrictMode> <BrowserRouter> <App /> </BrowserRouter> </React.StrictMode>, document.getElementById("root") );
index.js 파일에 import해주고 App 컴포넌트를 BrowserRouter 태그로 감싸주면 끝
HashRouter : 라우팅 안전하게 할수 있게 도움
HashRouter를 쓰게 되면 사이트 방문시 URL 맨 뒤에 /#/이 붙은채로 시작
우리는 요청할 서버가 없고 리액트가 라우팅을 담당하기 때문에 잘못하면 에러가 뜰수있다.
실수로 서버에게 요청하지 않게 하려면 안전하게 #을 붙여주는것, #뒤에 붙은것들은 절대 서버로 요청되지 않기 때문이다.
그렇다고 꼭 HashRouter를 써야되는것은 아니고 서버에서 api를 잘 짜주면 된다!!!
페이지를 메인페이지/상세페이지로 나누어 보자
//App.js
import { Link, Route, Switch } from "react-router-dom";
<Route path="/">
<div>메인페이지</div>
</Route>
<Route path="/detail">
<div>상세 페이지</div>
</Route>
/로 접속했을때
/detail로 접속했을때
<Route path="/주소" component={컴포넌트} ></Route>
component 옵션을 주면 컴포넌트를 보여줄수도 있다!!
/detail 경로로 접속해도 /경로 내용이 왜 보일까???
매칭이 되는것들은 다 보여주기 때문이다
그게 싫으면 exact라는 속성을 추가하자 그러면 경로가 정확히 일치할때만 보여줌
<Route exact path="/">
<div>메인페이지</div>
</Route>
이제 상세페이지는 보이지 않는다ㅎㅎ
이제 Router안에 메인페이지 태그들만 넣어주면 메인페이지는 구현이 끝이다
<Route exact path="/">
<div className="background">
<h1>20% Season Off</h1>
<p>안녕하세요</p>
<button type="button" class="btn btn-primary">
Learn more
</button>
</div>
.
.
.
<Route>
메인페이지가 동일하게 잘 나온다
React Router특: 페이지마다 다른 html 파일이 아님!!! html내부의 내용을 갈아치워서 다른페이지처럼 보여주는것
detail페이지도 예쁘게 만들어 주었다ㅎㅎ
출처 : https://codingapple.com/ (코딩애플님 리액트 강의)