- HashRouter는 BrowserRouter가 있기 이전에 많이 사용되었다.
- HashRouter를 사용하면, 주소에 #이 붙게 되고 이로인해 SEO에 대응되지 않는다.
- 또한 HashRouter는 History location을 지원하지 않는다.
- 위와 같은 이유로 요즘에는 잘 사용되지 않는다.
- 다만 HashRouter는 BrowserRouter와는 다르게 새로고침을 해도 페이지가 유지된다.
🍞 새로고침 시 BrowserRouter는 경로를 찾지 못하여 에러가 날 수 있다.
🍉 SPA는 index.html 파일 하나로 사이트를 구성하기에 새로고침 시 이 파일에 연결되지 않은 경로가 반영되어 에러가 난다.
- 따라서 정적 사이트를 만들 때는 HashRouter가 사용될 수 있다.
import { BrowserRouter, Switch, Route } from "react-router-dom";
~~ 생략 ~~
<BrowserRouter>
<Switch>
<Route exact path="/">
<Main />
</Route>
<Route exact path="/user">
<User />
</Route>
</Switch>
</BrowserRouter>
import { HashRouter, Switch, Route } from "react-router-dom";
~~ 생략 ~~
<HashRouter>
<Switch>
<Route exact path="/">
<Main />
</Route>
<Route exact path="/user">
<User />
</Route>
</Switch>
</HashRouter>