React-router 配置browserHistory

Posted 2020-11-02 laolinghunwbfullstack

  browserHistory是使用React Router的应用推荐的history，它使用浏览器重的History API用于处理URl

 

     可以通过设置webpack.config.js 中的devServer，设置如下

 devServer: {
        historyApiFallback:{
            index:‘src/index.html‘
        },
    }

     实际开发用browserHistory而不用hashHostory（可以直接用，不用在服务器配置）：

       browserHistory 其实使用的是 HTML5 的 History API，浏览器提供相应的接口来修改浏览器的历史记录；而 hashHistory 是通过改变地址后面的 hash 来改变浏览器的历史记录；

        History API 提供了 pushState() 和 replaceState() 方法来增加或替换历史记录。而 hash 没有相应的方法，所以并没有替换历史记录的功能。但 react-router 通过 polyfill 实现了此功能，具体实现没有看，好像是使用 sessionStorage。

另一个原因是 hash 部分并不会被浏览器发送到服务端，也就是说不管是请求 http://domain.com/index.html#foo 还是 http://domain.com/index.html#bar ，服务只知道请求了 index.html 并不知道 hash 部分的细节。而 History API 需要服务端支持，这样服务端能获取请求细节。       

注明：（绿字部分引用作为记录学习，不是本人写的）