Router란

🔧 Router은 모든 Router 컴포넌트의 인터페이스이며 기본적인 라우팅 관련 속성만 정의되어있다.

• <BrowserRouter>
• <HashRouter>
• <MemoryRouter>
• <NativeRouter>
• <StaticRouter>

<BrowserRouter>

• HTML5기록 API를 사용하여 구성요소를 렌더링합니다.
• 기록은 pushState과 replaceState를 통해 수정될 수 있습니다.
• 동적인 페이지에 접합합니다.
• 새로 고침시 경로를 찾지 못해 에러발생

<HashRouter>

• 기본적으로 URL의 해시를 사용하여 구성 요소를 렌더링합니다.
• 정적인 페이지에 사용하기 적합합니다.
• 새로고침시 에러 x
• 주소에 #이 붙습니다.
• 검색 엔진이 읽지 못합니다.

만약 여러개의 라우트가 존재한다면 <Switch>를 통해 감싸줘야합니다.

• Link to는 다른 곳에서 설정한 상태

<HashRouter>
	<Switch>
    	<Route exact path="/" component={App}/>
        <Route exact path="/price" component={Price}/>
    </Switch>
</HahsRouter>

Route에서 exact path가 아니라면 두번째 컴포넌트로 가지 않고 첫번째 컴포넌트가 반복되어 나올수 있다.

<HashRouter>
	<Switch>
    	<Route exact path="/item" component={App}/>
        <Route path="/item/:id" component={itemDetail}/>
    </Switch>
</HahsRouter>