HashRouter에 대해서

citron03·2022년 10월 19일
0

React

목록 보기
39/39
  • 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>    
profile
🙌🙌🙌🙌

0개의 댓글