react 嵌套路由相关

大 | 中 | 小
[不指定 2016/09/21 12:58 | by 刘新修 ]

 /src/js/app.js

JavaScript代码
  1. import React, { PropTypes, Component } from 'react';  
  2. import {render} from 'react-dom';   //render((_component),Dom);  
  3. //import ReactDOM from 'react-dom';     //ReactDOM.render((_component),Dom);  
  4. import getRouter from './getRouter';  
  5. import { Router, Route, Link, IndexRoute, hashHistory } from 'react-router';  
  6.   
  7. /* using an ES6 transpiler, like babel */  
  8. //import { createHistory } from 'history/createBrowserHistory'  
  9. //import createBrowserHistory from 'history/createBrowserHistory';  
  10.   
  11. /* Import Component */  
  12. import Hello from '../components/hello/hello.jsx'  
  13. import Other from '../components/other/other.jsx'  
  14.   
  15. /* ensure test */  
  16. require.ensure(['./test'],function(require){  
  17.     var aModule = require('./test');  
  18.     console.log("xxxx");  
  19. },'test');  
  20.   
  21. /* create history for router */  
  22. //const history = createHistory()  
  23.   
  24. /* Router Config */  
  25. render((  
  26.   <Router history={hashHistory}>  
  27.     <Route path="/" component={getRouter}>  
  28.       <IndexRoute component={Hello} />  
  29.       <Route path="other" component={Other} />  
  30.     </Route>  
  31.   </Router>  
  32. ), document.getElementById('app'));  

/src/js/getRouter.js

JavaScript代码
  1. import React, { PropTypes, Component } from 'react';  
  2. export default React.createClass ({   
  3.   render() {  
  4.     return <div>  
  5.       {this.props.children}  
  6.     </div>  
  7.   }  
  8. });  

/src/components/hello/hello.jsx

JavaScript代码
  1. import React, { PropTypes, Component } from 'react';  
  2.   
  3. /* 导入组件样式hello.css */  
  4. import styles from './css/hello.css';  
  5.   
  6. //require("./css/hello.css");  
  7.   
  8. class Hello extends React.Component {   
  9.     render(){   
  10.         return (  
  11.         <div className="hello">  
  12.         <p>Hello World!!!!!!!...</p>  
  13.         <p>cll不错！</p>  
  14.         </div>  
  15.         );   
  16.     };  
  17. };  
  18. export default Hello;  

/src/components/other/other.jsx

JavaScript代码
  1. class Other extends React.Component {  
  2.   render() {  
  3.         return (  
  4.         <div>  
  5.         <p>this is other component!!!</p>  
  6.         <p>111111111cll不错！</p>  
  7.         </div>  
  8.         )  
  9.   }  
  10. }  
  11.   
  12. export default Other;  
Tags: ,
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(4184)