前言
我們知道在GitHub中，我們可以將我們的html代碼托管到GitHub的倉庫里，然后訪問https://用戶名.github.io就可以看到我們部署的前端頁面。這對于不想花錢租服務(wù)器，又想搭建自己個人網(wǎng)站的程序員來說，可以算是一個很大的福音。我們只需要登錄GitHub賬號，然后新建一個用戶名.github.io的倉庫，接下來再把自己的代碼git到這個倉庫，我們在GitHub上的個人網(wǎng)站就能通過htpps://用戶名.github.io展示了。具體的教程可以網(wǎng)上搜索，這里就不具體討論了?？梢詤⒖歼@篇博客如何快速搭建自己的github.io博客
問題描述
現(xiàn)在前端頁面，多數(shù)是用react和vue等實現(xiàn)。這里主要講解一下我在使用react，并且想將打包后的APP部署到github.io時遇到的問題。我遇到的問題是，當(dāng)我想訪問react-app下的除路徑下的其它頁面，結(jié)果都返回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然后調(diào)用react-app里的各種函數(shù)將它渲染出來，再展示到大家面前，具體過程是react內(nèi)部自身實現(xiàn)的。但當(dāng)我們把代碼放到github.io上之后，GitHub服務(wù)器在react之前就把/blog拿去解析了，導(dǎo)致GitHub服務(wù)器自以為有這個目錄存在，于是就去尋找/blog目錄下的index.html。但我們知道，我們項目中實際上不存在blog這個目錄。所以當(dāng)GitHub服務(wù)器找不到這個目錄以及下面的文件后，就返回404了。
解決方法
現(xiàn)在我們知道問題出在哪里了，GitHub把/blog拿去解析，導(dǎo)致解析出錯。所以我們要做的是不讓GitHub去解析/blog，而是讓react-app自己去解析，也就是把/blog交給react根目錄下的index.html。怎么做呢，很簡單，把上面代碼中的BrowserRouter改為HashRouter就可以了
import {HashRouter as Router,Route,Switch} from "react-router-dom";
HashRouter和BrowserRouter最明顯的區(qū)別在于，它在/blog前面加了個#號，變成了#/blog。這就讓GitHub服務(wù)器把#后面的路徑當(dāng)作參數(shù)傳給了react-app，這樣react-app就能正常處理路徑問題了。
