[React] react-router-dom - Route / Switch

react-router-dom

react-route-dom은 SPA앱을 만드는 것을 도와주는 package

페이지마다 다른 html파일이 아니라 다른 페이지처럼 보여주는 것이라고 볼 수 있다.

 

npm에서 설치를 진행한다

npm i react-router-dom

 

기본 사용법

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

function App(){
  return <BrowserRouter>
    <Route path="/member" component={Member}/>
  </BrowserRouter>
}

- BrowserRouter : history API로 URL과 UI를 동기화 시키는 라우터

- HashRouter: 기본적으로 BrouswerRouter를 사용하지만 HashRouter는 주소 뒤에 #이 붙으며

#뒤에 적는 것은 서버로 전달이 되지 않아 안전한 라우팅이 가능하다.
- Route : path에는 경로가 들어가고 component는 불러올 component를 설정해준다.

- Link : 'a'태그와 비슷하지만 새로고침 없이 to속성에 설정된 링크로 이동한다.

- Switch : Route와 Redirect중 첫 번째로 매치되는 것을 렌더링한다.

function App(){
  return <BrowserRouter>
    <Route path="/">
      <h1>INDEX</h1>
    </Route>
    <Route path="/member">
      <h1>MEMBER</h1>
    </Route>
    <Route path="/member/login">
      <h1>LOGIN</h1>
    </Route>
  </BrowserRouter>
}

이렇게 하면 설정해놓은 path에 접근 시 아래와 같은 <h1>태그를 확인할 수 있다.

 

url: "/"
INDEX

url: "/member"
INDEX
MEMBER

url: "/member/login"
INDEX
MEMBER
LOGIN

 

이렇게 중첩되서 포함된 경로마다 전부 렌더링을 해준다.
이 부분을 해결하기 위해서는 exact true의 설정이 필요하다.

 

    <Route path="/" exact={true}>
      <h1>INDEX</h1>
    </Route>

exact true : URL이 오로지 "/"일 때만 rendering을 해준다는 설정.

true값을 생략하고 exact만 적어도 된다. <Route exact path="/"></Route>

 

 

이동될 경로 중에 id값을 받아서 이동되는 것들이 있을것이다.

동영상넘버나 상품넘버 등등 고유한 값을 이용한 경로 이동의 경우

Route path 설정을 :id로 해준다

 

<Route path="/:id">
	<div> Product </div>
</Route>

여기서의 /:id는 / 뒤의 모든 문자라는 뜻.

즉 주소창에 /아무문자 를 입력해도 해당 product의 div가 보여진다.

 

<Route path="/list">
<div> List </div>
</Route>

<Route path="/:id">
<div> Product </div>
</Route>

위와 같이 /list와 /:id의 route를 만들어주었을 경우

/list 경로로 가도 product가 보이는 것을 확인할 수 있다.

그러면 의도에 맞지않게 페이지 세팅이 되는 것인데,

이 중복 매칭을 방지하려면 Switch를 사용하면 된다.

 

Switch

매칭이 여러개가 맞아도 하나만 보여주고 싶을 때 사용.

즉, 중복 매칭을 방지해 주는 것이다.

 

사용 방법은 간단하다.

<Switch>
  <Route path="/list">
    <div> List </div>
  </Route>

  <Route path="/:id">
    <div> Product </div>
  </Route>
</Switch>

이렇게 Route의 위아래로 Switch를 감싸주고 /list로 들어가보면

product div가 보이지 않는 것을 확인할 수 있다.

 

** /:id Route가 코드상으로 위로 올라가면 product div가 보임