해시 라우터 & 브라우저

라우터 & 쿼리

공부를 위해 모르는 내용들을 검색해가며 적은 것으로 사실과 다른 내용이 있을 수 있습니다.

잘못 적은 내용이 있다면 댓글로 알려 주시면 감사하겠습니다.

---

import { BorwserRouter, HashRouter, Link, Route } from 'react-router-dom'	

HashRouter

URL에 Hash값을 사용하여 렌더링, 브라우저나 웹에 따른 제한이 없다.

라우팅은 서버와 독립적이다.

localhost:8080/#/goodbye
'#' 뒤에 붙은것이 hash다

goodbye는 브라우저만이 알고 있으며 서버는 모른다 => 검색엔진에 뜨지 않는다.

BrowserRouter

HTML5 History API를 사용해 렌더링, IE9 이하에서는 사용 할 수 없다.

서버와 연결되어 있지 않다면 새로고침시 정상적으로 뜨지 않는다.

서버 쪽에서 세팅을 했다면 검색엔진에 노출된다.

Dynamic Routing

<Route path="/users/:name" component{UserList} />

:name에 해당하는 부분은 동적으로 변한다 (UserList 컴포넌트에서 작업 필요) 이를 Param 이라고 한다.

QueryString

<Link to ="/users/user-number?query=10&hello=myname&bye=react">유저10</Link>

Render Props

:name(Param) 에서 UserList(Component)로 Props 넘기는 2가지 방법

<Route path="/path/:name" component={() => <UserList props="abcdef" />} />

<Route path="/path/:name" render={(props) => <UserList props={props} />} />
// 부모의 props를 자식에게 전달 할 수 있다.