Router入门0x203: react、react-route、react-route-dom

0x000 概述

上一章使用的是自己实现的route，当然已经有现成的库给我们用了，那就是react-route。

0x001 history Api说明

在说这个库之前，得先对history新的api做一个了解

1. window.history.pushState(data,title,?url)

   • data：数据
   • title：标题

   • url：地址

     当我们调用该函数的时候，将改变地址栏的地址，但是却不会导致页面重新去后台获取，如下图操作，在第一次初始化完成之后，我们依次调用

     window.history.pushState({name:'a'},'','a')
     window.history.pushState({name:'b'},'','b')
     window.history.pushState({name:'c'},'','c')
     window.history.pushState({name:'d'},'','d')

     将会看到地址栏分别变成了：

     https://github.com/a
     https://github.com/b
     https://github.com/c
     https://github.com/d

     但是网络请求却没有发出

2. window.history.state：该变量可以获取到跳转当前所处state时传入的data:

3. window.onpopstate：这是一个事件，可以设置监听器，监听状态被pop出来的时候的事件，其中go、back会触发该事件

4. 总结
   根据以上几个特性，就可以和上一章一样，做出一个基于history模式的路由库了

0x002 history库说明

history是一个针对该特性封装的库，以下是示例代码

import createHistory from 'history/createBrowserHistory'

const history = createHistory()

// 监听 location 的变化
const unlisten = history.listen((location, action) => {
    // location is an object like window.location
    console.log(action, location.pathname, location.state)
})
// 修改 location
history.push("/home", { some: "state" })
// 取消监听
unlisten()

查看浏览器

0x003 react-route

react-route+ history+ react就可以形成一个套餐了

• 源码

  import React from 'react'
  import ReactDom from 'react-dom'
  import { Router, Route, Switch,withRouter } from 'react-router'
  import createHistory from 'history/createBrowserHistory'
  
  class App extends React.Component{
      render(){
          console.log(this)
          return(
              
  
                  
  
                      {this.props.history.push('/index')}}>首页
                      {this.props.history.push('/article')}}>文章
                      {this.props.history.push('/mine')}}>我的
                  
                  
  
                  
                      ({render:()=>
  首页
  })}>
                      ({render:()=>
  文章
  })}>
                      ({render:()=>
  我的
  })}>
                  
              
          )
      }
  }
  
  const history = createHistory()
  
  let MyApp=withRouter(App)
  
  ReactDom.render(
      
          
      ,
      document.getElementById('app')
  )

• 效果
  

• 说明

  1. App组件说明
     App组件是跟组件，所有的组件都挂载在这个组件之下，在这个组件中，使用了两个react-route的组件，一个是Switch，用来在路由变化的时候切换显示的路由；一个是Route组件，一个Route代表一个页面，也代表一个组件，这里用了三个Route,每个Route对应一个路由，也对应一个组件，这里的组件为了方便，直接用匿名函数实现，分别是：

     ()=>({render:()=>
     首页
     }) // 对应`/index`
     ()=>({render:()=>
     文章
     }) // 对应`/article`
     ()=>({render:()=>
     我的
     }) // 对应`/mine`

     当我们点击相应的按钮的时候，将会调用this.props.history.push('${path}')来跳转到对应的页面，其中${path}是我们设置的Route组件的path属性。

  2. history
     通过history库来做location监听和跳转
  3. withRoute是一个HOC，为App组件注入了history对象和路由相关的属性，这样可以屏蔽路由的存在，将App组件变成一个纯粹的组件
  4. Router组件接管了histoy对象，在该组件中完成了history的监听和路由的渲染

0x004 react-route-dom

上面的调用太复杂了，需要手动创建 history、调用 this.props.history.push('/index')跳转，那有没有简单点的呢？那就是 react-router-dom，这个库封装了 react-route、 history库，并提供了几个实用的组件

• 源码

import React from 'react'
import ReactDom from 'react-dom'
import {BrowserRouter, Switch, Route, Link, withRouter} from 'react-router-dom'

class App extends React.Component {
    render() {
        return (
            

                

                    首页
                    文章
                    我的
                
                

                
                     ({render: () => 
首页
})}>
                     ({render: () => 
文章
})}>
                     ({render: () => 
我的
})}>
                
            
        )
    }
}

let MyApp = withRouter(App)


ReactDom.render(
    
        
    ,
    document.getElementById('app')
)

• 说明：

  1. 使用BrowserRouter替代Router，并且不再手动创建history
  2. 使用Link直接跳转
  3. 该库是在react-route和history库的基础之上封装的，只是为了在dom环境下快速调用，并且提供了一个更加实用的组件而已，不能应为这个库而忘记了本质。

0x005 总结

看透它，然后掌握它

0x006 资源

• 源码