3강 라우터(Router) 활용하기
React와 Firebase로 만드는 Word Cloud 웹앱2019. 1. 9. 02:07
728x90
반응형
가장 먼저 라우팅 기능을 위해 라이브러리를 설치합니다.
▶ ./src/components/Home.js
import React from 'react';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
class Home extends React.Component {
render() {
return (
<Card>
<CardContent>
React 및 Firebase 기반의 워드 클라우드 프로젝트
</CardContent>
</Card>
);
}
}
export default Home;
▶ ./src/components/Texts.js
import React from 'react';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
class Texts extends React.Component {
render() {
return (
<Card>
<CardContent>
Texts 페이지
</CardContent>
</Card>
);
}
}
export default Texts;
▶ ./src/components/Words.js
import React from 'react';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
class Words extends React.Component {
render() {
return (
<Card>
<CardContent>
Words 페이지
</CardContent>
</Card>
);
}
}
export default Words;
▶ ./src/components/App.js
import React from 'react';
import { HashRouter as Router, Route } from 'react-router-dom';
import AppShell from './AppShell';
import Home from './Home';
import Texts from './Texts';
import Words from './Words';
class App extends React.Component {
render() {
return (
<Router>
<AppShell>
<div>
<Route exact path="/" component={Home}/>
<Route exact path="/texts" component={Texts}/>
<Route exact path="/words" component={Words}/>
</div>
</AppShell>
</Router>
);
}
}
export default App;
▶ ./src/components/AppShell.js
import React from 'react';
import { Link as RouterLink } from 'react-router-dom';
import Link from '@material-ui/core/Link';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Drawer from '@material-ui/core/Drawer';
import MenuItem from '@material-ui/core/MenuItem';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
const styles = {
root: {
flexGrow: 1,
},
menuButton: {
marginRight: 'auto'
},
};
class AppShell extends React.Component {
constructor(props) {
super(props);
this.state = {
toggle: false
};
}
handleDrawerToggle = () => this.setState({toggle: !this.state.toggle})
render() {
const { classes } = this.props;
return (
<div>
<div className={classes.root}>
<AppBar position="static">
<IconButton className={classes.menuButton} color="inherit" onClick={this.handleDrawerToggle}>
<MenuIcon/>
</IconButton>
</AppBar>
<Drawer open={this.state.toggle}>
<MenuItem onClick={this.handleDrawerToggle}>
<Link component={RouterLink} to="/">
Home
</Link>
</MenuItem>
<MenuItem onClick={this.handleDrawerToggle}>
<Link component={RouterLink} to="/texts">
Texts
</Link>
</MenuItem>
<MenuItem onClick={this.handleDrawerToggle}>
<Link component={RouterLink} to="/words">
Words
</Link>
</MenuItem>
</Drawer>
</div>
<div id="content" style={{margin: 'auto', marginTop: '20px'}}>
{React.cloneElement(this.props.children)}
</div>
</div>
);
}
}
export default withStyles(styles)(AppShell);
※ 실행 결과 ※
728x90
반응형
'React와 Firebase로 만드는 Word Cloud 웹앱' 카테고리의 다른 글
| 6강 파이어베이스(Firebase)로 React 프로젝트 배포하기 (1) | 2019.01.09 |
|---|---|
| 5강 단어(Word) 데이터 삽입 및 삭제 기능 구현하기 (2) | 2019.01.09 |
| 4강 Firebase 데이터베이스 구축 및 React와 연동하기 (0) | 2019.01.09 |
| 2강 내비게이션 바(Navigation Bar) 만들기 (0) | 2019.01.09 |
| 1강 리액트(React) 프로젝트 구성 및 깃 허브 연동하기 (2) | 2019.01.08 |
