[React] 3. Router 세팅/기본 라우팅

라우팅: 페이지를 여러개 만드는것 (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 태그로 감싸주면 끝

BrowserRouter vs HashRouter

HashRouter : 라우팅 안전하게 할수 있게 도움

HashRouter를 쓰게 되면 사이트 방문시 URL 맨 뒤에 /#/이 붙은채로 시작
우리는 요청할 서버가 없고 리액트가 라우팅을 담당하기 때문에 잘못하면 에러가 뜰수있다.
실수로 서버에게 요청하지 않게 하려면 안전하게 #을 붙여주는것, #뒤에 붙은것들은 절대 서버로 요청되지 않기 때문이다.

그렇다고 꼭 HashRouter를 써야되는것은 아니고 서버에서 api를 잘 짜주면 된다!!!

페이지를 메인페이지/상세페이지로 나누어 보자

//App.js
import { Link, Route, Switch } from "react-router-dom";

1. 먼저 import 해주기

 <Route path="/">
 	<div>메인페이지</div>
 </Route>
 <Route path="/detail">
    <div>상세 페이지</div>
 </Route>

2. <Route path="/경로"></Route>
3. <Route> 안에 html 적기

/로 접속했을때
/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/ (코딩애플님 리액트 강의)