前言

我们知道在GitHub中，我们可以将我们的html代码托管到GitHub的仓库里，然后访问https://用户名.github.io就可以看到我们部署的前端页面。这对于不想花钱租服务器，又想搭建自己个人网站的程序员来说，可以算是一个很大的福音。我们只需要登录GitHub账号，然后新建一个用户名.github.io的仓库，接下来再把自己的代码git到这个仓库，我们在GitHub上的个人网站就能通过htpps://用户名.github.io展示了。具体的教程可以网上搜索，这里就不具体讨论了。可以参考这篇博客如何快速搭建自己的github.io博客

问题描述

现在前端页面，多数是用react和vue等实现。这里主要讲解一下我在使用react，并且想将打包后的APP部署到github.io时遇到的问题。我遇到的问题是，当我想访问react-app下的除路径下的其它页面，结果都返回404。接下来，我们就来解决这个问题。

寻找原因

从上面的描述，我们知道问题肯定出在了react的路由上，看一下我的部分路由代码

import {BrowserRouter as Router,Route,Switch} from "react-router-dom";

export default ()=>(
    <Router>
        <Switch>
            <Route path='/' exact component={Home}/>
            <Route path='/home' component={Home}/>
            <Route path='/blog' component={Blog}/>
            <Route path='/comment' component={Comment}/>
            <Route path='/app' component={App}/>
            <Route path='/others' component={Others}/>
        </Switch>
    </Router>
)

从react 4.0开始，react中的Router被取代，它分成了BrowserRouter和HashRouter。而我这里使用的是BrowserRouter。我们知道react的页面都是被渲染出来之后再显示出来，实际上这个文件夹或文件可能根本不存在。比如看上面的代码，blog这个目录本身是不存在的，要通过访问index.html然后调用react-app里的各种函数将它渲染出来，再展示到大家面前，具体过程是react内部自身实现的。但当我们把代码放到github.io上之后，GitHub服务器在react之前就把/blog拿去解析了，导致GitHub服务器自以为有这个目录存在，于是就去寻找/blog目录下的index.html。但我们知道，我们项目中实际上不存在blog这个目录。所以当GitHub服务器找不到这个目录以及下面的文件后，就返回404了。

解决方法

现在我们知道问题出在哪里了，GitHub把/blog拿去解析，导致解析出错。所以我们要做的是不让GitHub去解析/blog，而是让react-app自己去解析，也就是把/blog交给react根目录下的index.html。怎么做呢，很简单，把上面代码中的BrowserRouter改为HashRouter就可以了

import {HashRouter as Router,Route,Switch} from "react-router-dom";

HashRouter和BrowserRouter最明显的区别在于，它在/blog前面加了个#号，变成了#/blog。这就让GitHub服务器把#后面的路径当作参数传给了react-app，这样react-app就能正常处理路径问题了。