import React from 'react';
import ReactDOM from 'react-dom';
import {
    HashRouter,
    Route
} from 'react-router-dom';

const Home = () =>(
    <div>
        <h3>我是主页</h3>
    </div>
);
const About = () =>(
    <div>
        <h3>关于我们</h3>
    </div>
);

const Header = () => (
    <ul>
        <li>
            <a href="#/home">主页</a>
        </li>
        <li>
            <a href="#/about">关于</a>
        </li>
    </ul>
);

const Main = () =>(
    <div>
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
    </div>
);

class App extends React.Component{
    render(){
        return (<div>
            <Header></Header>
            <Main></Main>
        </div>)
    }
}

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