react-router-dom의 HashRouter 사용

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>