import React from 'react';
import ReactDOM from 'react-dom';
import {
    BrowserRouter,
    Route,
    Link,
    Switch
} from 'react-router-dom';

const Home = () =>(
    <div>
        <h3>我是主页</h3>
    </div>
);
const About = () =>(
    <div>
        <h3>关于我们</h3>
    </div>
);
const Some = () =>(
    <div>
        <h3>一些东西</h3>
    </div>
);

const Header = () => (
    <ul>
        <li>
            <Link to="/">主页</Link>
        </li>
        <li>
            <Link to="/about">关于</Link>
        </li>
    </ul>
);

const Main = () =>(
    <div>
        <Switch>
            <Route exact path="/" render={()=><h3>主页来了...</h3>}></Route>
            <Route path="/about" component={About} />
            <Route path="/:aaa" component={Some} /> 
        </Switch>
    </div>
);

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

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