리액트 _11_라우터(Router)페이지 만들기

* 화면이동할 때 쓰는 것이 router(라우터)다.

 

1. 새 프로젝트를 만든다.

2. package.json에 라이브러리를 넣는다. 

3. indext.html에 csslink를 넣는다. 

4. directory를 하나 만들고 안에 Header.js, Footer.js, Home.js, News.js..등등을 만들어준다.

5. Header.js를 작성한다.

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

   bootstrap에 가서 메뉴 디자인을 복사해온다.

import React,{Component} from "react";

class Header extends Component{
    render() {
        return(
            <nav className="navbar navbar-inverse">
                <div className="container-fluid">
                    <div className="navbar-header">
                        <a className="navbar-brand" href="#">Movie Center</a>
                    </div>
                    <ul className="nav navbar-nav">
                        <li className="active"><a href="#">Home</a></li>
                        <li><a href="#">현재상영영화</a></li>
                        <li><a href="#">개봉예정영화</a></li>
                        <li className="dropdown">
                            <a className="dropdown-toggle" data-toggle="dropdown" href="#">박스오피스
                                <span className="caret"></span></a>
                            <ul className="dropdown-menu">
                                <li><a href="#">주간</a></li>
                                <li><a href="#">월간</a></li>
                                <li><a href="#">년간</a></li>
                            </ul>
                        </li>
                        <li><a href="#">영화예매</a></li>
                        <li><a href="#">영화뉴스</a></li>
                    </ul>
                </div>
            </nav>
        )
    }
}
export default Header

6. App.js에서 합칠 예정!

  App.js에서 Header를 import 해주고 호출한다.

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Header from "./components/Header";

function App() {
  return (
    <Header/>
  );
}

export default App;

결과)

+박스오피스가 내려오지 않는 이유는 js를 다운받지않아서이다. (이거 두개 넣어주면 된다.)

7.   App.js에 조립을 하기 위해 Fragment를import해야한다.

    * class명 jumbotron은 회색 네모 박스를 의미한다. 

jumbotron

8.  App.js에 라우터를 import한다.

    * 이름이 너무 길면 as로 해서 줄여줄 수도 있다.

import {BrowserRouter as Router,Route,Switch} from "react-router-dom";

 

9. Fragment 대신 Router로 바꿔주고 Switch 태그를 이용해서 path에 따라 component를 적어준다. 

import React,{Fragment} from 'react';
import logo from './logo.svg';
import './App.css';
import {BrowserRouter as Router,Route,Switch} from "react-router-dom";
import Header from "./components/Header";
import Home from "./components/Home";
import MovieReal from "./components/MovieReal";
import MovieShc from "./components/MovieShc";
import BoxMonth from "./components/BoxMonth";
import BoxWeek from "./components/BoxWeek";
import BoxYear from "./components/BoxYear";
import News from "./components/News";

function App() {
  return (
      <Router>
        <Header/>
        <div className={"jumbotron"}>
            <Switch>
                <Route exact path={"/"} component={Home}/>
                <Route path={"/movie_real"} component={MovieReal}/>
                <Route path={"/movie_shc"} component={MovieShc}/>
                <Route path={"/box_week"} component={BoxWeek}/>
                <Route path={"/box_month"} component={BoxMonth}/>
                <Route path={"/box_year"} component={BoxYear}/>
                <Route path={"/movie_news"} component={News}/>
            </Switch>
        </div>
      </Router>
  );
}

export default App;

10. 이제 헤더의 메뉴를 클릭하면 화면 창이 변하도록 해보자.

    Header.js에 이걸 import한다.

import {NavLink} from "react-router-dom";

a태그 대신 NavLink을 넣는다. 

import React,{Component} from "react";
import {NavLink} from "react-router-dom";

class Header extends Component{
    render() {
        return(
            <nav className="navbar navbar-inverse">
                <div className="container-fluid">
                    <div className="navbar-header">
                        <a className="navbar-brand" href="#">Movie Center</a>
                    </div>
                    <ul className="nav navbar-nav">
                        <li className="active"><NavLink exact to={"/"}>Home</NavLink></li>
                        <li><NavLink to={"/movie_real"}>현재상영영화</NavLink></li>
                        <li><NavLink to={"/movie_shc"}>개봉예정영화</NavLink></li>
                        <li className="dropdown">
                            <a className="dropdown-toggle" data-toggle="dropdown" href="#">박스오피스
                                <span className="caret"></span></a>
                            <ul className="dropdown-menu">
                                <li><NavLink to={"/box_week"}>주간</NavLink></li>
                                <li><NavLink to={"/box_month"}>월간</NavLink></li>
                                <li><NavLink to={"/box_year"}>년간</NavLink></li>
                            </ul>
                        </li>
                        <li><NavLink to={"/movie_reserve"}>영화예매</NavLink></li>
                        <li><NavLink to={"/movie_news"}>영화뉴스</NavLink></li>
                    </ul>
                </div>
            </nav>
        )
    }
}
export default Header

결과) 메뉴 클릭하면 글씨가 바뀐다.