React系列六——react-router

react-router安装

jspm install react-router    //npm亦可

引入react-router组件

import { Router, Route, Link } from 'react-router';

react-router的使用

'use strict'

import React from 'react';
import ReactDom from 'react-dom';
import { Router, Link, Route } from 'react-router';
import 'semantic-ui/semantic.min.css!';  //“！”必须加

class App extends React.Component {
  render() {
    return (
      <div>
        <div className="ui secondary pointing menu">
          <Link to="/" className="item">首页</Link>
          <Link to="/tv" className="item">电视</Link>
        </div>
        {this.props.children}  {/* 显示他的儿子 */}
      </div>
    );
  }
}

class TV extends React.Component {
  render() {
    return (
      <div>
        <div className="ui info message">电视节目列表</div>
        {this.props.children}  {/* 显示他的儿子 */}
      </div>
    );
  }
}

class Show extends React.Component {
    constructor(props) {
        super(props);

        console.log(this.props.params);  //获取地址内的参数  地址为：localhost:3000/#/tv/shows/1?_k=fnv6ms    输出结果为：id:1
    }
  render() {
    return (
      <h3>节目 {this.props.params.id}</h3>   //输出结果为：节目1
    )
  }
}

ReactDom.render((
  <Router>
    <Route path="/" component={App}>    //默认地址
      <Route path="tv" component={TV}>    //地址+组件
        <Route path="shows/:id" component={Show} ></Route>   {/* :id  传递的参数 */}
      </Route>
    </Route>
  </Router>
), document.getElementById('app'));