react
리액트 _11_라우터(Router)페이지 만들기
새내기개발자
2020. 5. 16. 15:52
* 화면이동할 때 쓰는 것이 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은 회색 네모 박스를 의미한다.
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
결과) 메뉴 클릭하면 글씨가 바뀐다.
반응형