[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