十一、React 路由

'use strict'


import 'semantic-ui/semantic.min.css!';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
// import { Router, Route, Link, Switch } from 'react-router';
import {
    BrowserRouter as Router,
    Route,
    Link,
    Switch
} from 'react-router-dom';

class App extends Component {
    render() {
        return (
            <div>
                <div className="ui secondary pointing menu">
                    <Link to="/" className="item" >Home</Link>
                    <Link to="/about" className="item">About</Link>
                    <Link to="/inbox" className="item">Inbox</Link>
                </div>
                {this.props.children}
            </div>
        );
    }
}

const About = () => (
    <div className="ui info message">
        <h3>About</h3>
    </div>
)

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

const Message = ({ match }) => (
    <div>
        <h3>new messages</h3>
        <h3>{match.params.id}</h3>
    </div>
)

const Inbox = ({ match }) => (
    <div>
        <h2>Topics</h2>
        <Route path={`${match.url}/messages/:id`} component={Message}/>

    </div>
)

ReactDOM.render(
    (<Router>
        <App>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/inbox" component={Inbox} />
        </App>
    </Router>),
    document.getElementById('app')
);