2-1. React Router

React Router

router 기능 사용을 위해 react-router-dom 설치

yarn add react-router-dom 

npm install react-router-dom

https://www.npmjs.com/package/react-router-dom

 

Hash Router / Browser Router

대표적으로 두가지 방식의 라우터가 있다.

가장 기본적인 라우터 설정을 예시로 알아보자

Router.js

import React from "react";
import { HashRouter as Router, Route } from 'react-router-dom';
import Home from "../Router/Home"; // 보여줄 컴포넌트와 그 경로

export default () => {
    <Router>
        <Route path="/" exact component={Home} />
    </Router>
}

Route 를 사용해 경로와 경로에 따라 보여줄 컴포넌트를 지정한다.

여기서 exact 옵션은 "path 값과 정확히 일치하는 경로일때" 의 상황을 지정!

<Route> 는 항상 <Router> 안에 있어야 한다!

 

HashRouter

• 내 페이지(URL)의 hash를 활용
• URL에 #을 포함한다
• 해시 히스토리 지원 X
• URL의 # 때문에 검색엔진이 읽지 못하고 서버사이드 렌더링에 적합하지 않음
• 정적인 페이지에 더 적합

HashRouter로 Home 컴포넌트에 접근

BrowserRouter

BrowserRouter로 Home 컴포넌트에 접근

• 브라우저가 제공하는 HTML5의 history API를 활용
• 동적인 페이지에 더 적합

 

둘 중 뭘 사용하더라도 크게 이슈는 없다고 한다! 선호하는 것을 사용하면 될 것이다