react-router的BrowserHistory 和 HashHistory 的区别，如何解决使用BrowserHistory 引发的访问路径问题

 

 

 

一，使用createBrowserHistory 和 createHashHistory 的 区别体现

1. 使用createBrowserHistory ()

// 使用createBrowserHistory的代码
import React from 'react'; import { Router, Route, Switch} from 'react-router-dom';
import { createHashHistory, createMemoryHistory, createBrowserHistory} from 'history';
 import First from './container/First'; import Second from './container/Second'; import Third from './container/Third'; import Fourth from './container/Fourth'; const router = (props) => { return ( <Router history={createBrowserHistory()}>
            <Switch>
                <Route exact path={"/"} component={First} />
                <Route exact path={"/first"} component={First} />
                <Route exact path={"/second"} component={Second} />
                <Route exact path={"/third"} component={Third} />
                <Route exact path={"/fourth"} component={Fourth} />
            </Switch>
        </Router>
 ) } export default router;

使用createBrowserHistory()，效果以下：

 

 

 2. 使用createHashHistory()

//使用createHashHistory
const router = (props) => { return ( <Router history={createHashHistory()}>
            <Switch>
                <Route exact path={"/"} component={First} />
                <Route exact path={"/first"} component={First} />
                <Route exact path={"/second"} component={Second} />
                <Route exact path={"/third"} component={Third} />
                <Route exact path={"/fourth"} component={Fourth} />
            </Switch>
        </Router>
 ) } export default router;

使用createHashHistory()，效果以下：

 

 

3. 经过上面的对比， 能够发现

createBrowserHistory() 和 createHashHistory() 的区别体如今 打开页面的路径上：

createBrowserHistory： http://localhost:8084/second

createHashHistory： http://localhost:8084/#/second

还有一个 createMemoryHistory

——如今来看看官方介绍：

• “browser history” - A DOM-specific implementation, useful in web browsers that support the HTML5 history API
• “hash history” - A DOM-specific implementation for legacy web browsers
• “memory history” - An in-memory history implementation, useful in testing and non-DOM environments like React Native

browserHistory： 是使用浏览器中的 History API 来处理 URL（使用 React Router 推荐的 history）

hashHistory： 是使用 URL 中的 hash（#）部分去建立路由

memoryHistory： 未使用，不作介绍

 

 

二，browserHistory 和 hashHistory 的优缺点比较

1. 先看看官方推荐的 browserHistory 

browserHistory 是使用 React-Router 的应用推荐的 history方案。它使用浏览器中的 History API 用于处理 URL，建立一个像example.com/list/123这样真实的 URL 。

(摘自http://react-guide.github.io/react-router-cn/docs/guides/basics/Histories.html)

由于是使用真实的浏览器history，就像HTML网页间的跳转同样，和浏览器的操做配合完美（浏览器自带的“后退”，“前进”，“刷新” 按钮，浏览器会记录浏览history）

 

另外：此处须要解释一下单页面应用（SPA）和多页面应用（MPA）：

1）多页面模式（MPA  Multi-page Application）： 
　　　　多页面跳转须要刷新全部资源，每一个公共资源(js、css等)需选择性从新加载
　　　　页面跳转：使用window.location.href = "./index.html"进行页面间的跳转；
　　　　数据传递：能够使用path?account="123"&password=""路径携带数据传递的方式，或者localstorage、cookie等存储方式

2）单页面模式（SPA  Single-page Application）： 
　　　　只有一个Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源 ，公共资源(js、css等)仅需加载一次
　　　　页面跳转：使用js中的append/remove或者show/hide的方式来进行页面内容的更换；
　　　　数据传递：可经过全局变量或者参数传递，进行相关数据交互

多页面模式，就是多个HTML页面之间的操做，浏览器会经过自身的history处理好页面间的操做，

单页面模式，对于浏览器来讲只有一个HTML页面，任何操做都在同一个页面内，浏览器没法监控到页面跳转（实际只是内容改变，路径没变）

 

在单页面模式下使用browserHistory 的问题是：只有一个真实的html页面，是没法体现出html页面之间跳转的效果的

这时就须要使用服务器配合，模拟出多个HTML页面，从而实现浏览器真实的页面跳转效果

 

2. 问题展现：

——在webpack 的 本地服务器模式下（webpack-dev-server插件模拟的本地服务器 ）

未开启historyApiFallback：

// 本地服务器 webpack-dev-server插件，开发中server，便于开发，能够热加载
 devServer: { contentBase: './dist',  //默认本地服务器所在的根目录
        //historyApiFallback: true, 
        inline: true,   //源文件改变时刷新页面
        port: 8084  //端口号，默认8080
    },

 

 

 开启historyApiFallback：

// 本地服务器 webpack-dev-server插件，开发中server，便于开发，能够热加载
 devServer: { contentBase: './dist',  //默认本地服务器所在的根目录
        historyApiFallback: true,   //开启
        inline: true,   //源文件改变时刷新页面
        port: 8084  //端口号，默认8080
    },

 

 

 因而可知webpack-dev-server 中 设置 historyApiFallback 能够解决browserHistory 的问题

historyApiFallback 功能：

当使用 HTML5 History API 时，任意的 404 响应均可能须要被替代为 index.html

 

 

 

三，那么，非开发模式（打出来的包）怎么办？？

方法一： 使用服务器进行相关配置，配合browserHistory进行使用

能够参考这篇文章： https://www.thinktxt.com/react/2017/02/26/react-router-browserHistory-refresh-404-solution.html

其实，就是经过服务器（不管Nginx，仍是Node均可以）在浏览器方法该目录下（好比dist文件夹）的文件时，都返回 index.html，

好比访问  example.com/list/123 路径，

1. 可是服务器下没有这个文件可供访问，
2. 因此就须要经过设置服务器，当浏览器访问不存在的页面时，都给索引到 index.html 
3. 在index.html 咱们的browserHistory 才能派上用场

方法二： 使用HashRouter，虽然路径 http://localhost:8084/#/second 多个‘#’，虽然项目内跳转页面可能会有问题。。。

 

若是有服务器端的动态支持，建议使用 BrowserRouter，不然建议使用 HashRouter。