react-router中HashRouter和BrowserRouter的区别和使用场景

一、react-router 的工作方式

是在组件树顶层放一个 Router 组件，然后在组件树中散落着很多 Route 组件（注意比 Router 少一个“r”），顶层的 Router 组件负责分析监听 URL 的变化，在它保护伞之下的 Route 组件可以直接读取这些信息。Router 是“提供者”，Route是“消费者”.如下

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter } from 'react-router-dom';
import './index.css';
import App from './App';

ReactDOM.render((
    <HashRouter><App /></HashRouter>
), document.getElementById('root'));

// App.js
import React, { Component } from 'react';
import Overview from './page/Home';
import GitHubStars from './page/GitHubInfo';

const { Content } = Layout;

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        return (
            <div>
                <Content>
                    <Switch>
                        <Route exact path="/" component={ Overview }/>
                        <Route exact path="/stars-info" component={ GitHubStars }/>
                    </Switch>
                </Content>
            </div>
        );
    }
}

二、BrowserRouter和HashRouter的区别和特点

更进一步，Router 其实也是一层抽象，让下面的 Route 无需各种不同 URL 设计的细节。 URL设计方法，至少可以分为两种：

BrowserRouter

这一种很自然，比如 / 对应 Home页 ，/about 对应 About 页，但是这样的设计需要服务器端渲染，因为用户可能直接访问任何一个 URL，服务器端必须能对 /的访问返回 HTML，也要对 /about的访问返回 HTML。BrowserRouter支持这种URL。 ①基于history模式：页面跳转原理是使用了HTML5为浏览器全局的history对象新增了两个API，包括 history.pushState、history.replaceState；和vue router的history模式实现一致
②更加优雅： 直接拼接路径；如：www.abc.com/xx
③后端需做请求处理： 切换路由后，请求接口路径会发生变化，后端需要配合，做处理

HashRouter

这一种看起来不自然，但是实现更简单。只有一个路径 /，通过 URL 后面的 # 部分来决定路由，/#/ 对应 Home 页，/#/about 对应 About 页。因为URL中#之后的部分是不会发送给服务器的，所以，无论哪个 URL，最后都是访问服务器的 / 路径，服务器也只需要返回同样一份 HTML就可以，然后由浏览器端解析 # 后的部分，完成浏览器端渲染。HashRouter支持这种URL。
①基于hash模式：页面跳转原理是使用了location.hash、location.replace；和vue router的hash模式实现一致
②比较丑：在域名后，先拼接/#，再拼接路径；也就是利用锚点，实现路由的跳转；如：www.abc.com/#/xx

三、使用场景

HashRouter

①项目部署在内网：如To B的项目、本公司业务人员用的项目等等

BrowserRouter

①项目部署在公网：如To C的项目、面向大众的项目，url路径美观点当然更好，但后端需要做处理