REACTROUTER 사용

차리다

create-react-app로 프로젝트를 제작합니다.

$ create-react-app route-test

react-router-dom을 설치합니다.

$ yarn add react-router-dom

개발 서버 시작.

$ yarn start

시험해 보다

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import './index.css';

const Home = () => (
    <div>
        <h2>Home</h2>
    </div>
)

const About = () => (
    <div>
        <h2>About</h2>
    </div>
)

const Contact = () => (
    <div>
        <h2>Contact</h2>
    </div>
)

const Child = ({ match }) => (
    <div>
        <p>{match.params.id}です</p>
    </div>
)

const App = () => (
    <div>
        <Nav />
        <Router>
            <div style={{padding: '10px'}}>
                <p>
                    <Link to="/">Home</Link>&nbsp;
                    <Link to="/about">About</Link>&nbsp;
                    <Link to="/contact">Contact</Link>&nbsp;
                </p>

                <hr />

                <Route exact path="/" component={Home}/>
                <Route path="/about" component={About}/>
                <Route path="/contact" component={Contact}/>

                <hr />

                <Route exact path="/" render={() => (
                    <p>ホームページにようこそ！</p>
                )} />
                <Route path="/:id" component={Child}/>
            </div>
        </Router>
        <Footer />
    </div>
)

const Nav = () => (
    <div className="Nav" style={{ background: '#6cf', padding: '20px 10px' }}>
        Navbar
    </div>
)

const Footer = () => (
    <div className="footer" style={{textAlign: 'center'}}>
        <hr />
        Footer
    </div>
)

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

캡처

뻔한 일