BrowserRouter VS HashRouter

return (
	<HashRouter>
		<Switch>
		//생략
		</Switch>
	</HashRouter>
}

Twine에서 React-Router를 사용하는데 이 Router들을 감싸는 wrapper Component가 HashRouter였다.

 

지금 내가 따로 공부하는 React에서는 BrowserRoute 래퍼 컴포넌트를 사용한다. 따라서 두 컴포넌트 차이가 무엇인지 알아보게 되었다.

 

먼저 URL에서 #이 붙으면 웹서버의 관점에서 그 뒤는 주석과도 같다.

 

HashRouter에서는 이 점을 적극 이용하여 #을 추가한 URL을 만들어낸다. 이로서 Browser가 URL을 관리하는 것이 아닌, JS코드로 URL을 관리하도록 만든다.

왜냐하면 JS는 #이후를 읽을 수 있기 때문에, #이후의 주소를 확인하고, 이에 따라 React컴포넌트 배치를 변경하여 마치 주소가 변경된 것과도 같은 착각을 사용자에게 주는 것이다.

브라우저의 입장에서는 URL이 변경된 것이 아무것도 없기 때문에 주소 이동이 발생하지 않지만, 사용자가 보기에는 페이지의 컴포넌트가 전부 바뀌므로 URL이 이동한 것처럼 느끼는 것이다.

 

BrowerRouter와 차이점이 발생할 수 있는 지점이 이 지점인데, 페이지가 새로고침 되거나 다시 랜더링했을 경우, #이후의 정보가 유지되는 HashRouter는 BrowserRouter보다 URL변환 없이 더 많은 정보를 기억하고 있는 것처럼 유저에게 보여줄 수 있다.

 

Twine의 주석에서 HashRouter를 사용한 이유는 아래와 같이 기술되어 있었다.

A <HashRouter> is used to make our lives easier-to load local story formats, we need the document HREF to reflect where the HTML file is.
Otherwise we'd have to store the actual location somewhere, which will differ between web and Electron contexts.

 

Twine에서 유저가 만든 텍스트 게임들의 정보를 Stroy라고 부르는데, 이 Story의 정보는 HTML파일 형식으로 전부 변환되어 저장된다. 아마도 이 HTML파일을 저장하는 방식 때문에 HashRouter를 차용한 것 같은데 확실하게 이해하지는 못했다.