react 路由

主要分为 history 和 hash路由两种

react路由:路由跳转页面不会刷新,a标签会跳转刷新

history(在ie浏览器存在兼容性问题)
路由跳转: pushstate、replacestate 浏览器回退: popstate

hash路由 (实现主要在于hash原本用于锚点)
hashchange 监听location.hash的变化

ReactRouter

history : 负责浏览器页面,链接改变,通知当前页面location对象发生改变,开发者自己根据变化渲染内容
Router:负责监听页面对象发生了改变,并开始重新渲染当前页面;
Route 页面开始渲染后,根据具体的页面location信息展示具体路由地址对应的内容(组件)

React.render( 
    ====  
     
       
          
           
         
         
            
          
         
             
          
         { console.log('111router/test', props);  return props.location.pathname;  }} /> 
         { return   }}> 
         
          
       
   
), document.body)
// Router

  
 

// Route   Route 渲染方式 children render component

  内部 matchPath 
param/:a/:b  param/1/2  通过pathToRegexp 解析而成{a: 1,b:2}  

withRouter
通过withRouter 包裹后的组建可以拿到 Router上面provider 提供的数据信息, 也可以render={(prosp) => return React.cloneElement( ,{...props})}

exact 会判断 传进来 pathname === url 是否全等 false => return null

switch
React.children.forEach(this.props.children, child => {
if(match === null )
return
})

循环遍历返回

页面链接改变history里面的pushstate => 事件监听 触发 setState, 从而触发渲染, router里面的location

你可能感兴趣的