zoukankan      html  css  js  c++  java
  • React router

     1 import React from 'react';
     2 import ReactDOM from 'react-dom';
     3 import { Router, Route, hashHistory,browserHistory,IndexRoute,Link } from 'react-router';
     4 
     5 
     6 class App extends React.Component {
     7   render () {
     8     return (
     9       <div>
    10       app:{this.props.children}
    11        <ul>
    12           <li><Link to="/about">about</Link></li>
    13           <li><Link to='/report'>report</Link></li>
    14           <li><Link to='/about/15'>/report/15</Link></li>
    15           
    16         </ul>
    17       
    18       </div>
    19     );
    20   }
    21 }
    22 class Report extends React.Component {
    23   render () {
    24     return (
    25       <div>Report</div>
    26     );
    27   }
    28 }
    29 class About extends React.Component {
    30   render () {
    31     return (
    32       <div>
    33       About {this.props.location.query.id} params:{this.props.params.id}
    34        {/*about?id=3 得到地址栏参数 后一个得到这样: http://localhost:8888/build/test/router.htm#/about/15*/}
    35       </div>     
    36     );
    37   }
    38 }
    39 
    40 
    41 
    42 
    43 let rs=
    44 <Router history={hashHistory}>
    45     <Route path="/" component={App}>
    46         <IndexRoute component={Report}/>
    47         <Route path="/report" component={Report}/>
    48         <Route path="/about" component={About}/>
    49         <Route path="/about/:id" component={About}/>
    50     </Route>
    51 </Router>;
    52 
    53 ReactDOM.render(rs, document.getElementById('container'));
  • 相关阅读:
    4、数组及字符串
    3、处理数据
    2、开始学习C++
    1、C++学习预备知识
    Django【进阶篇 】
    Django【基础篇】
    Python操作MySQL
    MySQL(二)
    python日记-使用队列写出特殊字数串
    python日记-快速排序算法
  • 原文地址:https://www.cnblogs.com/yuri2016/p/6078229.html
Copyright © 2011-2022 走看看