react-router

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. NavLink 路由激活

5. exact 路径完全匹配 必须是一直的 / /home

6. 重定向组件 Redirect

7. 路由（ 当我们是 /category , 跳转 /categor/1 ） 路由组件可以通过componentWillReceiveProps compoenntDidMount来监听路由变化

8. App组件不是路由组件，不能监听路由的变化，使用非常规手段将App组件变成路由组件

   • 使用高阶组件 withRouter

9. Switch一定要写，它一次只渲染一个组件，如果不写，路由组件全部都会渲染出来

10. 动态路由

    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