React Router

参考：http://www.ruanyifeng.com/blog/2016/05/react_router.html

概念：

路由库是通过管理 URL，实现  “组件”  的切换和状态的变化。关键词是“组件”间。

要完成路由，需要Router 和 Route 两个组件。其中Router组件本身只是一个容器，真正的路由要通过Route组件定义

安装

   npm install -S react-router

引用

   import { Router, Route, hashHistory } from 'react-router';

路由

   
         
         
        
  

  这句的意思是：
            访问根路径/ 跳转到 APP组件
            访问/repos  跳转到Repos组件
            访问/about  跳转到About组件
  这个有点像java spring 框架中的controller层的路由
  http://localhost:8080/#/repos


  嵌套写法：
   
        /＊嵌套部分＊/
         
               
               
        
  

  /*APP.js*/
  /*App组件的this.props.children属性就是子组件*/
  export default React.createClass({ 
          render() { 
                  return 
 {this.props.children} 
 
          }
  })

  =======================================
  /*换种写法*/
  let routes =  
                        
                             
               ;

   

Path

    
       
   

   访问/inbox/messages/:id时，会加载
          
              
         

    1.path的配置的通配符：

      :paramName匹配URL的一个部分，直到遇到下一个/、?、#为止。
      这个路径参数可以通过this.props.params.paramName取出。

      
      // 匹配 /hello/michael
      // 匹配 /hello/ryan

      ()表示URL的这个部分是可选的

      
      // 匹配 /hello
      // 匹配 /hello/michael
      // 匹配 /hello/ryan

      *匹配任意字符，直到模式里面的下一个字符为止。匹配方式是非贪婪模式

       
      // 匹配 /files/hello.jpg
      // 匹配 /files/hello.html

      
      // 匹配 /files/ 
      // 匹配 /files/a
      // 匹配 /files/a/b

      **匹配任意字符，直到下一个/、?、#为止。匹配方式是贪婪模式

      
      // 匹配 /files/hello.jpg
      // 匹配 /files/path/to/file.jpg

   2.注意事项
       
             
              
      

      用户访问/about/me时，不会触发第二个路由规则，因为它会匹配/:userName/:id这个规则。因此，带参数的路径一般要写在路由规则的底部。

   3.IndexRoute
      把IndexRoute想象成某个路径的index.html，IndexRoute组件没有路径参数path。
       
           
               
               
               
          
      

Redirect

   组件用于路由的跳转，即用户访问一个路由，会自动跳转到另一个路由。
   组件用于访问根路由的时候，将用户重定向到某个子组件。

      
          ＜IndexRedirect to="/welcome" /> 

          {/* 从 /inbox/messages/:id 跳转到 /messages/:id */} 
          ＜Redirect from="messages/:id" to="/messages/:id" />

               
          
     

Link

    Link组件用于取代元素，生成一个链接，允许用户点击后跳转到另一个路由。它基本上就是元素的React 版本，可以接收Router的状态。
    IndexLink组件使用路径的精确匹配。

    render() { 
            return 
 
                      
 
                        
About
 
                        
Repos
                      
 
                   
     }

     如果链接到根路由/，不要使用Link组件，而要使用IndexLink组件。这是因为，
     对于根路由来说，activeStyle和activeClassName会失效，或者说总是生效，因为/会匹配任何子路由。
     而IndexLink组件会使用路径的精确匹配。

     
      Home
     

     同样的，onlyActiveOnIndex属性也能实现同样效果
      
     Home
     

History

    Router组件的history属性，用来监听浏览器地址栏的变化，并将URL解析成一个地址对象，供 React Router 匹配。
    属性value：
          browserHistory
          hashHistory
          createMemoryHistory

表单

  
 
         
         
        Go
  


  import { browserHistory } from 'react-router'
  // ... 
  handleSubmit(event) { 
            event.preventDefault() 
            const userName = event.target.elements[0].value 
            const repo = event.target.elements[1].value 
            const path = `/repos/${userName}/${repo}`      
            在Router组件之外，导航到路由页面，可以使用浏览器的
            History API，像下面这样写       
            browserHistory.push(path)
   },
    ... ... 

路由的钩子

  每个路由都有Enter和Leave钩子，用户进入或离开该路由时触发。

  
  ＜Route path="inbox" component={Inbox}> 
          ＜Redirect from="messages/:id" to="/messages/:id" />
  

  上面的代码中，如果用户离开/messages/:id，进入/about时，会依次触发以下的钩子:
    /messages/:id的onLeave
    /inbox的onLeave
    /about的onEnter