19.12.03 Router, Route, Switch

import React from "react";
import { 
    BrowserRouter as Router, 
    Route,
    Redirect,
    Switch
} from "react-router-dom";
import Home from "Routes/Home";
import TV from "Routes/TV";
import Search from "Routes/Search";

export default () => (
    <Router>
        <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/tv" exact component={TV} />
            <Route path="/tv/popular" render={() => <h1>popular</h1>} />
            <Route path="/search" component={Search} />
            <Redirect from="*" to="/" />
        </Switch>
    </Router>
);

• react에서 제공하는 , 태그를 이용해 라우터 설정을 간편하게 할 수 있다.
• component를 사용하여 Routes/... 경로에 있는 파일로 연결 가능하다.
• 태그를 이용하면 한 번에 오직 하나의 Route만 렌더하게 된다.
• Route에 exact 를 기재하면 정확히 그 경로만 설정된다.