老标题当了哈哈，以前有个谣言说

程序员为什么喜欢写技术博客，是因为没有女朋友可以分享，但是实际上有女朋友你也不好分享，因为你看了一个新的技术，分享吧会感觉在装逼，不分享吧，对不起我在这花费的心思。

所以，我默默的写下这票技术博客

来源：https://reactrouter.com/web/guides/primary-components

react-router 的 BrowserHistory 和 hashHistory的去区别

主要的区别就是存储url的方式和与web服务端通信的方式

• browserHistory 使用常规的URL路径的形式，也是外观最好的形式。但是，需要服务端进行相应的配置，你必须将你的服务端路由配置正确的匹配到你每个路由对应的客户端的组件。其实大家也不必太担心，个人的开发经验告诉我，前后端分离开发的过程，存在两种情况，

一种是服务端不需要你去开发和维护，你只要关注客户端的路由入口，每个子路由对应的组件是什么即可。

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

function App() {
  return <h1>Hello React Router</h1>;
}

ReactDOM.render(
  <BrowserRouter>
    <App /> // 这里面你把你前端的路由匹配好就行
  </BrowserRouter>,
  document.getElementById("root")
);

第二种就是需要你去配置服务端的路由。这个也不难，一般来说我们只要一个入口，你只要匹配根路由即可。这个涉及到如何创建一个server有关，大家可以查询node、nginx等服务端的配置都能找到详细的解答

• hashHistory 会把当前的位置存储在hash路由中，因此它的URL看起来就像这样 http://example.com/#/your/page. 由于hash路由的改变并不会想服务器发送请求，所以无需服务端配置。

题外话： 个人经验告诉我hashHistory会存在一些坑，比如微信分享、微信支付等，需要发送当前页面的路由作验证然后染回token才能去正常工作，但是微信会将你发送的页面路由作截取操作，最经典就是会截取掉你的hash路由。因此不得不做兼容工作去解决类似问题。