Router 原理及 React-Router

页面路由（浏览器路由）

页面会刷新

window.location.href = "http://www.baidu.com"
history.back()

hash路由

页面不会刷新，之前做单页应用，使用的传统方法。

window.location.hash='#bb365';
监听hash 的变化：
window.onhashchange = function(){
  console.log("current hash:" ，window.location.hash)
}

h5 路由

h5新出的API，页面不会刷新，单页应用必备。不仅可以更改hash, 更改pathname也不会刷新页面。

//推进一个状态
history.pushState('name', 'title', '/path')
//替换一个状态
history.replaceState('name','title','/path2')
// 以上替换，不会新增一条浏览历史
// popstate  只处理后退，不能监听前进
window.onpopstate = function(){
  console.log(window.location.href)
  console.log(window.location.pathname)
  console.log(window.location.hash)
  console.log(window.location.search)
}

React-Router常见的API

// 路由方式
<BrowserRouter>  对应h5 路由
<HashRouter>  对应hash路由
// 路由规则
<Router>
// 路由选项
<Switch>
// 跳转导航
<Link>  <NavLink>
// 自动跳转
<Redirect>

1. react-router的实现原理
2. 前端路由实现及 react-router v4 源码分析
3. react-router了解一下