React路由

安装组件

命令行工具安装路由：

jspm install react-router

jspm install npm:react-router-dom

效果

 

 

main.js

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


class App extends React.Component {
    render() {
        return (
            <Router>
                <div className="ui secondary pointing menu">                  
                    <Link to="/tv" className="item">电视</Link>
                    <Link to="/show" className="item">节目</Link>
                </div>   
                <div>        
                        <Route path="/tv" component={TV}>
                        </Route>
                        <Route path="/show" component={Show}>
                        </Route>
                   
                </div>
            </Router>
        );
    }
}

class TV extends React.Component {
    render() {
        return (
            <div>
                <div className="ui info message">电视节目</div>
                {this.props.children}
            </div>
        );
    }
}

class Show extends React.Component {
    render() {
        return (<h3>节目</h3>);
    }
}



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