React Js - Router (URL 연결, 화면 렌더링)

React Js - Router

• Router

  url 주소로 페이지를 연결해주는 역활을 한다.

  • 설치

     npm install --save react-router-dom

  • 사용

    Router.js

     import Home from "Routes/Home";
     import TV from "Routes/TV";
     import Search from "Routes/Search";
     ​
     // BrowserRouter
     import { HashRouter as Router, Route } from "react-router-dom"; 
     ​
     export default () => (
         <Router>
             <>
                 <Route path="/" exact component={Home} />
                 <Route path="/tv" component={TV} />
                 <Route path="/search" component={Search} />
             </>
         </Router>
     );

  • Composition 두개이상의 라우터를 동시에 렌더링 하는 방식 (같은 페이지에 렌더링됨)

          <Route path="/tv"  component={TV} />
          <Route path="/tv/popular" render={()=><h1>Popular</h1>} />

    

    
    

• Redirect

  페이지 이동 처리

• 설치

  react-router-dom 에 포함됨

• 사용

  Router.js

   // Redirect 추가
   import { HashRouter as Router, Route, Redirect} from "react-router-dom";
   ​
   export default () => (
       <Router>
           <>
               <Redirect from="*" to="/"/>
           </>
       </Router>
   );

• Switch

  한번에 하나의 Route만 렌더링한다

  • 설치

    react-router-dom 에 포함됨

  • 사용

     // Switch 추가
     import { BrowserRouter as Router, Route, Redirect, Switch} from "react-router-dom"; 
     ​
     export default () => (
         <Router>
             <Switch>
                 <Route path="/" exact component={Home} />
                 <Route path="/tv"  component={TV} />
                 <Route path="/tv/popular" render={()=><h1>Popular</h1>} />
                 <Route path="/search"  component={Search} />
                 <Redirect from="*" to="/"/>
             </Switch>
         </Router>
     );

  • 
    

출처 : https://academy.nomadcoders.co/