BrowserRouter

WooBuntu·2021년 4월 5일
0

알고 쓰자 리액트

목록 보기
9/11

https://reactrouter.com/web/api/BrowserRouter

pushState, replaceState, popstate와 같은 HTML5 history API를 사용해서 URL과 UI를 동기화시키는 Router이다.

  • basename
<BrowserRouter basename="/calendar">
    <Link to="/today"/> // renders <a href="/calendar/today">
    <Link to="/tomorrow"/> // renders <a href="/calendar/tomorrow">
    ...
</BrowserRouter>

만약 리액트 애플리케이션이 서버의 calendar라는 하위 디렉토리로부터 serve된다고 한다면, 위와 같이 basename을 해당 서브 디렉토리의 이름으로 설정하면 된다.
(예시가 별로 와닿지 않는데...)

  • getUserConfirmation
<BrowserRouter
  getUserConfirmation={(message, callback) => {
    // this is the default behavior
    const allowTransition = window.confirm(message);
    callback(allowTransition);
  }}
/>

모든 Route를 넘나들 때마다 사용자에게 확인을 받고자 한다면, 위와 같이 getUserConfirmation을 설정해주면 된다. 예시처럼 보통 window.confirm과 함께 쓰인다.

  • forceRefresh
<BrowserRouter forceRefresh={true} />

Route를 넘나들 때마다 전통적인 SSR이 그랬던 것처럼 전체 페이지를 새로고침하는 것이다.(이렇게 할거면 SPA를 왜 씀...?)

  • keyLength
<BrowserRouter keyLength={12} />

location객체의 key속성의 길이를 커스텀할 수 있다. default는 6이다.

0개의 댓글