关于前端:react-路由

次要分为 history 和 hash 路由两种

react 路由：路由跳转页面不会刷新，a 标签会跳转刷新

history（在 ie 浏览器存在兼容性问题）
路由跳转：pushstate、replacestate 浏览器回退：popstate

hash 路由（实现次要在于 hash 本来用于锚点）
hashchange 监听 location.hash 的变动

ReactRouter

history：负责浏览器页面，链接扭转，告诉以后页面 location 对象产生扭转，开发者本人依据变动渲染内容
Router：负责监听页面对象产生了扭转，并开始从新渲染以后页面；
Route 页面开始渲染后，依据具体的页面 location 信息展现具体路由地址对应的内容（组件）

React.render(<BrowserRouter>  ==== <Router history={createHistory()} > </Router>
    <Layout> 
      <Switch> 
        <Route exact path="/msg">  
          <Message /> 
        </Route> 
        <Route exact path="/index"> 
          <Index />  
        </Route>  
        <Route exact path="/about"> 
            <About /> 
        </Route>  
        <Route path='/test/:id?/:key?' render={(props) => {console.log('111router/test', props);  return props.location.pathname;  }} /> 
        <Route path='/param/:a?/:b?' component={(props) => {return <Param {...props} />  }}></Route> 
        <Redirect from='/' to='/index' /> 
        </Switch>  
      </Layout> 
  </BrowserRouter> 
), document.body)

// Router
<RouterContext.provider 
  value={{
    history: this.props.history,
    location: this.state.location,
    match: Router.computeRootMatch(this.state.location.pathname),
    staticContext: this.props.staticContext // 动态路由
  }}
 >
  <HistoryContext.provider
    children={this.props.children || null}
    value={this.props.history}
  />
 <RouterContext.provider>

// Route   Route 渲染形式 children render component
<RouterContext.Consumer>
  外部 matchPath 
param/:a/:b  param/1/2  通过 pathToRegexp 解析而成 {a: 1,b:2}  
</RouterContext.Consumer>

withRouter
通过 withRouter 包裹后的组建能够拿到 Router 下面 provider 提供的数据信息，也能够 render={(prosp) => return React.cloneElement(<componet/> ,{…props})}

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

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

循环遍历返回

页面链接扭转 history 外面的 pushstate => 事件监听 触发 setState, 从而触发渲染，router 外面的 location