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'));
  • 相关阅读:
    CentOS最常用命令
    cssreset
    mysql cmd连接 乱码
    帮朋友转发招聘信息 南京知名互联网公司招聘java、测试、前端,具体私聊
    InputStream写文件出现大量NUL
    iOS app开发资料整理
    完美的视图旋转算法
    Windows上使用clang编译
    nodejs
    Rpath handling on Linux
  • 原文地址:https://www.cnblogs.com/yuri2016/p/6078229.html
Copyright © 2011-2022 走看看