react路由

react router 4.0 react-router-dom

React router的模式：

1. HashRouter

• 老浏览器的history,通过hashchange事件来监听url的变化情况

2. BrowserRouter

• 新浏览器的history，借助了H5提供的createBrowserRouter来实现，通过监听popstate事件来实现

React router四个核心包

  包名                 	Description                             
  react-router       	  React Router核心api                       
  react-router-dom   	  React Router的DOM绑定，在浏览器中运行不需要额外安装react-router
  react-router-native	  React Native 中使用，而实际的应用中，其实不会使用这个。      
  react-router-config	  静态路由的配置                                 

使用流程演示

1. 安装两个依赖包
   $ yarn add react-router react-router-dom
2. 在入口文件index.js中使用router

      import { BrowserRouter as Router} from 'react-router-dom'
      ReactDOM.render(
        <Router>
          <App />
        </Router>
      , document.getElementById('root'));
   
   

3. Route上面的属性
4. import { NavLink,Route } from 'react-router-dom 在所需组件引入，就可以**NavLink和Route属性，
5. NavLink 路由**
6. exact 路径完全匹配 必须是完全一致的 / /home
7. 重定向组件 Redirect
8. 路由（ 当我们是 /category , 跳转 /categor/1 ） 路由组件可以通过componentWillReceiveProps compoenntDidMount来监听路由变化,以上属性的引入源均是‘react-route-dom’
9. App组件不是路由组件，不能监听路由的变化，使用非常规手段将App组件变成路由组件
   • 使用高阶组件 withRouter，“withRouter可以包装任何自定义组件，将react-router 的 history,location,match 三个对象传入。 达到这三个对象在组件间的相互通信
10. Switch一定要写，它一次只渲染一个组件，如果不写，路由组件全部都会渲染出来
11. 动态路由
    1. 路由传参 Link/NavLink 组件身上的to属性来传递 to = {{pathname,search,hash,state}}
    2. 路由接参
       1. id: this.props.match.params.id
       2. search: 先用querystring将search转换成object

         const qs = require('querystring')
         let { search } = this.props.location // '？a=1&b=2'
         const { a, b } = qs.parse( search.slice(1) )
       

       3. state； this.props.location.state.xxx