BrowserRouter HashRouter 차이 + BrowserRouter 배포시 흰 화면 문제

 

 

내가 공부하다가 궁금해서 정리해본 차이점

 

 

 

 

react는 알다시피 SPA(single page application)에 최적화 되어있다.

그 이유 중 하나가 바로 router.

1. react-router-dom을 설치해서 이용하며

2. a 태그를 이용할 때 생기는 무의미한 재랜더링을 예방 => 속도가 빠르다

 

router에는 우리가 익히 아는 

 

BrowserRouter

HashRouter

외에도

StaticRouter

MemoryRouter

NativeRouter

이 있다.

 

 

 

🤷‍♀️ BrowserRouter과 HashRouter의 차이는?

 

BrowserRouter

 www.123123/post

1. HTML5의 history API를 이용해 UI를 업데이트

2. 동적인 페이지에 적합

3. 새로 고침 / 경로를 이용해 찾아갈 때 에러 발생 => 추가적인 세팅 필요.

 

HashRouter

 www.123123/#/post

1. URL의 hash를 이용함

2. 주소에 #가 붙는다

3. 정적인 페이지에 적합

4. 검색 엔진으로 읽지 못한다 ( #값 때문)

5. 새로고침 해도 에러가 나지 않는다

6. 주소가.. 못생김!

 

 

 

 

🤷‍♀️ 그래서, BrowserRouter과 HashRouter의 차이는 왜 궁금해 하는 건데?

 

내가 경험한 문제는 deploy를 했을 때 일어났다.

BrowserRouter을 사용해 코드를 짜고 배포했을 때 배포한 코드가 Route를 인식하지 못하고 그냥 흰 화면에 div 위치만 보여지는 일이 발생했다.

하지만 HashRouter을 사용했을 때는 이 문제가 생기지 않았다.

 

 

 

🤷‍♀️ 문제의 원인?

 

BrowserRouter을 이용했을 때만 오류가 생겼던 이유는

HashRouter을 사용했을 때는 도메인 뒤에 /#/ 이 붙으면서 도메인 주소를 확실히 인식시킬 수 있지만

BrowserRouter은 그게 아니었던 것!

다시 말해

아무런 설정 없이 BrouwserRouter로 짠 코드를 배포하게 되면

라우터가 가리키는 '/'의 경로가 우리가 설정한 리포지터리 이름이 아니게 된다

=> 흰 화면이 나오는 것이 당연함

왜? 아무것도 없는 index.html 화면만 그려주고 있으니까

 

 

 

🤷‍♀️ 해결 방법은?

 

1. HashRouter을 쓴다.

당연하다, BrowserRouter이 가지고 있는 문제이기 때문에 HashRouter을 쓰면 해결 될 문제이다

그러나 HashRouter을 쓰지 못할 이유가 있다면

 

 

2. ✨ basename 추가하기 ( 권장 ) 

 

BrowserRouter 안에 props를 추가해 basename을 설정해주면 된다.

 

<BrowserRouter>

const AppRouter = () => {
  return (
    <BrowserRouter basename={process.env.PUBLIC_URL}>
      <Routes>
        <Route path="/" element={<Coins />} />
        <Route path="/:coinId/*" element={<Coin />} />
      </Routes>
    </BrowserRouter>
  );
};

여기서 PUBLIC_URL은 package.json의 homepage URL 값으로 설정된다.

 

<package.json>

"homepage": "https://userJu.github.io/react-masterclass-coin-challenge"

 

 

 

🙇‍♀️

• https://worker-k.tistory.com/entry/React-BrowserRouter%EC%99%80-HashRouter%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90-%EC%A0%95%EB%A6%AC
• https://create-react-app.dev/docs/advanced-configuration/

 

• 노마드코더 react masterclass 수업을 들으신 이름모를 감사하신 분