Router의 기본

router는 페이지를 나누는 것을 말한다. 더 정확히 얘기하면 라우팅이라고 한다. 라우팅은 터미널에

npm install react-router-dom@5
//yarn add react-router-dom@5

를 써주면 된다. 그런 다음, 세팅을 해줘야 한다. index.js로 들어가서 import를 해줘야한다.

import { BrowserRouter } from 'react-router-dom';

이렇게 적어준다. import시 경로에 ./가 없으면 대부분 라이브러리 이름이다. 그러고index.js에서

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

이렇게, <BrowserRouter></BrowserRouter>로 <App />를 감싸주면 세팅이 끝난다. 그리고 HashRouter가 있는데 Browser자리에 다 Hash로 입력해주면 된다. hash는 주소창에 #이 생기며, 차이점은 hash가 라우팅을 좀 더 안전하게 할 수 있게 도와준다. 이유는 사이트 주소 뒤에 #이 붙으면 서버로 전달을 막아주기 때문이다. browser 라우터는 라우팅을 리액트가 아니라 서버에 요청할 수도 있어서 위험하다.

 

 원리는 /abc 로 접속하면 이 페이지를 보여주고, /few 로 접속하면 저 페이지를 보여주세요가 기본 원리인데, 예시를 들어서, 이해해보자. 쇼핑몰의 메인페이지와 상세페이지로 나누고 싶고, 메인페이지에서 주소창에 detail을 치면 상세페이지가 나오게 하려고 한다.

 

먼저, App.js의 상단에 import를 해와야 한다.

import { Link, Route, Switch } from 'react-router-dom';

그 다음,html이 있는 곳에,

<Route exact path="/"> 
        <div>메인페이지인데요</div>
</Route>
<Route path="/detail">
        <div>상세페이지인데요</div>
</Route>
//route는 경로가 포함되면 다보여준다. 그래서 /detail을 주소창에 치면 /로 시작되며detail도 있어서
//메인페이지와 상세페이지 둘 다 보여준다. 그래서 정확히 일치하는 주소를 찾고 싶으면 exact를 붙여주면
//경로가 정확히 일치할 때 보여준다.

이렇게 적어준다. 기본적으로 <Route path="/경로"></Route>적어주고 Route안에 html을 적어주면 된다. 그리고 컴포넌트 하나를 보여주고 싶으면

<Route path="어쩌구" component={보여줄컴포넌트이름} ></Route>

이렇게 사용도 가능하다. 이러면 뒤로가기 앞으로가기가 가능하며, 둘은 다른 html파일이 아니라 같은 파일이다.