在github pages實作historyAPI

最近在摸個React專案想部署到github pages當白嫖仔，結果遇到使用historyAPI的route不能順利在github pages上使用。
翻了許多教學都說可以但一直失敗，最後終於找到原因，必須要使用HashRouter，這部分很多教學沒有說清楚，使用方式如下。

import React, { Component } from "react";
import { HashRouter, Route, Switch } from "react-router-dom";
import Home from "./components/Homepage";
import Page2 from "./components/Page2";
import "./App.css";
class App extends Component {
render() {
  return (
    <div>
      <HashRouter basename={process.env.PUBLIC_URL}>
        <div className="App">
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/page2" component={Page2} />
        </Switch>
        </div>
      </HashRouter>
    </div>
    );
  }
}
export default App;

設定.env

PUBLIC_URL=你的網域

要使用react-router-dom的HashRouter，並且設定basename，這樣build完後將打包資料部署到github pages上，就能完美使用囉。
切換router的寫法會像是這樣：domain/#/
本方式參考這篇

關於React-router上使用historyAPI

historyAPI真的滿方便的，但我還在研究中，在react實作有一些需要注意的可以參考此篇。