前端路由、后端路由、react-router区别

后端路由：

后端路由又可称之为服务器端路由，因为对于服务器来说，当接收到客户端发来的HTTP请求，就会根据所请求的相应URL，来找到相应的映射函数，然后执行该函数，并将函数的返回值发送给客户端。对于最简单的静态资源服务器，可以认为，所有URL的映射函数就是一个文件读取操作。对于动态资源，映射函数可能是一个数据库读取操作，也可能是进行一些数据的处理，等等。然后根据这些读取的数据，在服务器端就使用相应的模板来对页面进行渲染后，再返回渲染完毕的页面。这种方式在早期的前端开发中非常普遍，比如京东页面就是个后端路由，他请求的就是一个页面

 

前端路由：

对于前端路由来说，路由的映射函数通常是进行一些DOM的显示和隐藏操作

 

前端路由有哪几种方式：hash、history API

hash

hash实现就是基于location.hash来实现的。其实现原理也很简单，location.hash的值就是URL中#后面的内容。比如百度网站，设置它的location.hash='#abcsdf'，那么他的网址就是：https://www.baidu.com/#abcsdf

当一个页面的（显示）状态被改变时，可以通过location.hash实现刷新页面后或者copy页面的URL再打开后保持状态而不还原。当hash只有一个#时，location.hash返回空字符串；当hash不止一个#时，location.hash返回#以及#后面的部分。当 一个window的 hash （URL 中 # 以及#后面的部分，可通过location.hash返回）改变时就会触发 hashchange 事件。window.location属性返回一个有文档的当前位置的信息的Location对象。

 

history API

history 这个对象在html的时候新加入两个api history.pushState() 和 history.repalceState() 这两个 API可以在不进行刷新的情况下，操作浏览器的历史纪录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录，

hisroty下面的其他api：

window.history.back()//后退
window.history.forward()//前进
window.history.go(1)//前进一部，-2回退两不，window.history.length可以查看当前历史堆栈中页面的数量

操纵浏览器历史

DOM window 对象通过 history 对象提供了对浏览器历史的访问。

window.history.back();：和用户点击浏览器回退按钮的效果相同。类似的还有window.history.forward();和window.history.go(Num);。另外，window.history.length; 可以获得历史堆栈中页面的数量。执行history.back()或history.forward()后会触发 window.onpopstate事件。

pushState()方法绝不会导致hashchange 事件被激活，就算新的URL和旧的只在hash上有区别。也就是说仅仅调用pushState方法或replaceState方法，并不会触发该事件，只有用户点击浏览器后退和前进按钮时，或者使用js调用back、forward、go方法时才会触发。

history.pushState() 方法和history.replaceState()方法分别可以添加和改变历史实体。这两个方法要和window.onpopstate事件一起用。push和pop说明它们的行为就像栈。popstate事件会被触发当一个文档的激活的历史实体改变。如果激活的历史实体是由history.pushState()创建的，或者是被history.replaceState()改变过，那popstate事件的state属性（即e.state）会包含一个该激活的历史实体的sate对象的副本；如果不是，那e.state的值为null。调用history.pushState()方法和history.replaceState()方法不会触发popstate事件。现在的浏览器加载页面时都不会触发popstate事件了（以前有的浏览器会）。

// 阻止浏览器后退功能
fn () {
    if(window.history && window.history.pushState) {
        window.onpopstate=function () {
            window.history.pushState('forward', null, '');
            window.history.forward(1);
        };
    }
    window.history.pushState('forward', null, '');//在IE中必须得有这两行
    window.history.forward(1);
}

history.pushState()接收三个参数，一个对象（用作state），一个字符串（用作标题，但是目前都被浏览器忽略），一个字符串（用作URL，是可选的）：

·state会成为history.pushState()添加的历史实体的属性，可以用history.state获得。传入state的参数要能字符串化，比如能用JSON字符串化。state这个对象字符串化后的大小有限制（火狐是640K），如果需要更多的空间，你应该使用sessionStorage 和/或localStorage。

·第二个参数传入空的字符串即可。

·传入的URL可以是相对的也可以是绝对的。如果是相对的，它将相对于当前的URL被解析。传入的URL必须和当前的URL同源。如果不传入URL，则会被设置为当前的URL。

总之，调用pushState()和设置window.location = "#foo"（设置hash，与window.location.hash = "#foo"等效，且window.可省略）很像，两者都创建了并激活了一个新的历史实体。但是前者由以下优点：

1.         新的URL可以是任何和当前URL同源的URL，而设置window.location让你智能呆在同一个文档里，因为你只改变了hash。

2.         你可以不改变URL而创建新的历史实体，而通过设置window.location = "#foo";创建一个新的历史实体则必须要求当前的hash不是#foo。

3.         你可以在state中放入任何数据，而用hash就只能在URL末尾放入短字符串形式的数据。

history.replaceState()和history.pushState()很像，除了是改变当前的历史实体而不是创建一个新的。当你像更新当前的历史实体的state对象或URL来响应用户的行为时，replaceState()相当有用。

 

react-router

React router 只是一个核心库,React项目的可用的路由库

• react-router 核心组件
• react-router-dom 应用于浏览器端的路由库（单独使用包含了react-router的核心部分）
• react-router-native 应用于native端的路由

React router 提供 location 对象的地方 ：

• Route 组件接收到的 props 中可以得到 location
• Route 组件的属性 render 的回调函数的参数 ： ({ location }) => ()
• Route 组件的属性 children 的回调函数的参数： ({ location }) => ()
• withRouter 传递给所包裹组件中 props 包含 locaton

React router组件

<BrowserRouter>、<HashRouter>、<MemoryRouter>、<NativeRouter>、<StaticRouter>、<Router>

winthRouter

这是一个高阶组件（函数），withRouter 可以包装任何自定义组件，将 react-router 的 history,location,match 三个对象传入。 无需一级级传递react-router 的属性，当需要用的router 属性的时候，将组件包一层 withRouter，就可以拿到需要的路由信息，可以作为一种集成 Redux 和 react router 的方法。

BrowserRouter组件

<BrowserRouter> 使用 HTML5 提供的 history API (pushState, replaceState 和 popstate 事件) 来保持 UI 和 URL 的同步。

HashRouter组件

<HashRouter> 功能与<BrowserRouter>一样，但是原理不同。<HashRouter> 使用 URL 的 hash 部分（即 window.location.hash）来保持 UI 和 URL 的同步。