React-Router

React-Router其实很简单，就是控制页面之间的跳转。
现举例说明：

1. 创建几个组件
   ./app/containers/App.jsx 所有页面的外壳
   ./app/containers/Home 主页
   ./app/containers/User 用户页
   ./app/containers/NotFound 404
   App组件所有路由外面套的外壳

    class App extends React.Component {
        render() { 
            return ( 
                
   {this.props.children}
    
            ) 
        }
    }
   

2. 配置 router
   class RouteMap extends React.Component {
   updateHandle() {
   console.log('每次router变化之后都会触发')
   }
   render() {
   return (
   
   
   
   
   
   
   )
   }
   }
   使用时直接在页面引入RouteMap就好了
   import React from 'react' import { render } from 'react-dom'
   import { hashHistory } from 'react-router'

    import RouteMap from './router/routeMap'
   
    render( , 
            document.getElementById('root') 
    )
   

3. 跳转页面
   第一种是 跳转(这个渲染完了就是html中a标签)
   import React from 'react'
   import { Link } from 'react-router'

    class Home extends React.Component { 
        render() { 
            return ( 
                
    
                    
   Home
                    to list
                
    ) 
        }
    } 
    export default Home
   

第二种是使用 js 跳转
import { hashHistory } from 'react-router'
hashHistory.push('/home/')

4. 获取参数
   可以获取 url 中的参数，比方说id参数
   this.props.params.id 获取
5. 性能问题
   视屏时间

• 解决方案就是先不要加载其他页面的代码，即首页需要哪些代码我就先加载、执行哪些，不需要的就先别加载。
• 针对大型项目的静态资源懒加载问题，react-router 也给出了解决方案 —— huge-apps，它将 react-router 本身和 webpack 的 require.ensure结合起来，就解决了这一问题。我本人项目没那么复杂，暂时没用到。