react-router（不同組件之間傳遞路由）

1. 圖解：
   
   
   
   
2. 代碼：

   // less
   require ('./static/less/index.less')
   // 核心
   var React = require('react')
   var ReactDom = require('react-dom')
   var ReactRouter = require('react-router-dom')
   var Router = ReactRouter.BrowserRouter
   var Route = ReactRouter.Route
   var Link = ReactRouter.Link
   var CreateClass = require('create-react-class')
   var PropTypes = require('prop-types')
   var ajax = require('dollarphpajax')
   // 組件
   var Index = CreateClass({
   render:function(){
       return (
           <Router>
               <div>
                   <Head/>
                   <Route exact path="/" component={Content}/>
                   <Route exact path="/1" component={Content}/>
                   <Route exact path="/2" component={Content}/>
               </div>
           </Router>
       )
   }
   })
   var Head = CreateClass({
   render:function(){
       return (
           <ul>
               <li><Link to="/">main</Link></li>
               <li><Link to="/1">1</Link></li>
               <li><Link to="/2">2</Link></li>
           </ul>
       )
   }
   })
   var Content = CreateClass({
   render:function(){
       return (
           <div>
               <Route exact exact path="/" component={Content_main}/>
               <Route path="/1" component={Content_1}/>
               <Route path="/2" component={Content_2}/>
           </div>
       )
   }
   })
   var Content_main = CreateClass({
   render:function(){
       return (
           <h3>
               main
           </h3>
       )
   }
   })
   var Content_1 = CreateClass({
   render:function(){
       return (
           <h3>
               1
           </h3>
       )
   }
   })
   var Content_2 = CreateClass({
   render:function(){
       return (
           <h3>
               2
           </h3>
       )
   }
   })
   // 渲染
   ReactDom.render(
        <Index/>,
        document.getElementById('app')
   )

3. 效果：