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'));
