리액트 라우터 2부

BrowserRouter

• HashRouter와는 다른 방식인 BrowserRouter이다. (URL에 # 표시가안됨)
• BrowserRouter는 컴포넌트를 동시에 가질수있다.
• import { BrowserRouter as Router, Route } from "react-router-dom";
• exact를 사용하지 않을시 /tv와 /tv/popular 경로가 서로 매칭되어 둘이 같은 화면에 보여짐
• /tv/popular 경로로 가면 tv와 popular이 동시에 나타남

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

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

Redirect , Switch

• Redirect는 일치하는 Route가 하나도 없다면 홈으로 보내줌
• Switch는 한번에 오직 하나의 ROute만 Render하게 해줌

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" component={TV} />
      <Route path="/search" component={Search} />
      <Redirect from="*" to="/" />
    </Switch>
  </Router>
);