前端学习笔记 React (6) Router定义访问路由

类似于服务器, 前端访问也需要一个路由进行不同界面的跳转.

安装

jspm install react-router@3

快速开始

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

class App extends React.Component {
  render() {
    return (
      <div>
        <div className="ui sencondary 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 {
  render() {
    return <h3>节目</h3>;
  }
}

ReactDOM.render(
  <Router>
    <div>
      <Route path="/" component={App}></Route>
      <Route path="/tv" component={TV}></Route>
      <Route path="/tv/shows/:id" component={Show}></Route>
    </div>
  </Router>,
  document.getElementById('app')
);

注意: 在 react-router 4.x 版本中, 使用的是 react-router-dom 不再支持静态路由, 所以上面的写法只支持 3.x 及以下版本.