반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- webpack
- VirtualBox
- picker
- jest
- linux
- MachineLearning
- qunit
- 센토스
- localserver
- PYTHON
- react
- avds
- MAC
- build
- unittest
- TensorFlow
- 네트워크
- ReactNative
- vsCode
- Chrome
- IOS
- 맥
- centos
- androidstudio
- 개발
- 리눅스
- Android
- node
- xcode
Archives
- Today
- Total
로메오의 블로그
[React.js] Router 적용하기 [Multiple Router] 본문
반응형
[REACT.JS] CREATE-REACT-APP 없이 REACT.JS 프로젝트 생성하기
[GIT] GITHUB에 프로젝트 올리기 (GIT COMMAND 사용)
React Rout를 적용해보겠습니다.
react-router-dom 설치
$ yarn add react-router-dom
추가 파일 생성
$ mkdir src/components src/css
$ touch src/components/Home.js src/components/Profile.js src/components/About.js src/components/OperatingSystem.js src/css/styles.css
다음 폴더를 생성합니다.
src/components
src/css
다음 파일을 생성합니다.
src/components/Home.js
src/components/Profile.js
src/components/About.js
src/components/OperatingSystem.js
src/css/styles.css
$ rm src/App.css src/logo.svg
필요없는 파일을 제거합니다.
src/App.js
import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import Home from './components/Home';
import Profile from './components/Profile';
import About from './components/About';
import './css/styles.css'
export default class App extends React.Component {
render() {
return (
<BrowserRouter>
<ul className="menu-wrapper">
<li><Link to="/">Home</Link></li>
<li><Link to="/profile">Profile</Link></li>
<li><Link to="/about">About</Link></li>
</ul>
<Route exact path="/" component={Home} />
<Route path="/profile" component={Profile} />
<Route path="/about" component={About} />
</BrowserRouter>
);
}
}
/src/components/Home.js
import React from 'react';
class Home extends React.Component {
render() {
return (
<div>
<h1>Home</h1>
</div>
);
}
}
export default Home;
/src/components/Profile.js
import React from 'react';
class Profile extends React.Component {
render() {
return (
<div>
<h1>Profile</h1>
</div>
);
}
}
export default Profile;
/src/components/About.js
import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import OperatingSystem from './OperatingSystem';
class About extends React.Component {
render() {
return (
<div>
<h1>About</h1>
<ul>
<li>
<Link to={`${this.props.match.url}/windows`}>Windows</Link>
</li>
<li>
<Link to={`${this.props.match.url}/mac-os`}>Mac OSX</Link>
</li>
<li>
<Link to={`${this.props.match.url}/cent-os`}>CentOS</Link>
</li>
</ul>
<Route path={`${this.props.match.path}/:os`} component={OperatingSystem} />
<Route exact path={this.props.match.path}
render={() => <h3>OS를 선택하세요.</h3>}
/>
</div>
);
}
}
export default About;
/src/components/OperatingSystem.js
import React from 'react';
class OperatingSystem extends React.Component {
render() {
return (
<div>
<h3>{this.props.match.params.os}</h3>
</div>
);
}
}
export default OperatingSystem;
/src/css/styles.css
.menu-wrapper {
display: flex;
justify-content: space-evenly;
list-style: none;
padding: 0;
background-color: #eee;
}
.menu-wrapper li {
padding: 10px 0;
color: #61dafb;
}
서버구동
$ yarn run start
react Router를 적용했습니다.
Git Commit & Push
$ git add .
$ git commit -m "라우터 적용"
$ git push
반응형
'Frontend > React' 카테고리의 다른 글
[React Native] Stack navigation 사용하기 2 (2022년 기준) (0) | 2022.10.12 |
---|---|
[React Native] Stack navigation 사용하기 (2022년 기준) (0) | 2022.10.12 |
[React Native] 프로젝트 생성하기 (2022년 기준) (0) | 2022.10.10 |
[React.js] Firebase Realtime 데이터베이스 불러오기 (0) | 2019.07.14 |
[React.js] create-react-app 없이 React.js 프로젝트 생성하기 (2) | 2019.07.10 |
Comments