配合實做分頁，這篇會把目前為止的 webpack 專案的 app.jsx 做一點簡單的調整。
這篇只記錄實作過程。
 
成品可以參考 github。

 
首先安裝 react-router-dom

 
完成之後調整 app.jsx

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

ReactDOM.render(
  <div>
    <HashRouter>
      <Switch>
        <Route exact path="/" component={ProgressBar} />
        <Route path="/FetchAPI" component={FetchAPI} />
        <Route path="/DrawGame" component={DrawGame} />
      </Switch>
    </HashRouter>
  </div>,
  document.getElementById("root")
);

 
主要就是引入 HashRouter, Route, Switch，並將頁面改為 <Route>的寫法。

完成後下指令 npm run serve，沒意外的話就可以看到首頁是 ProgressBar 的畫面了。
其他的頁面可以直接在 # 字後之後加上路徑名稱切換。

例如:
http://localhost:8082/#/DrawGame
http://localhost:8082/#/FetchAPI
( port 號可能跟我不一樣，要看你的 npm run serve 出來的結果)
 
不過手動輸入還是有點麻煩，接下來做個簡單的 header 放置頁面切換按鈕。

// RouteHeader.jsx
import "./../assets/RouteHeader.css";
import React, { useEffect } from "react";
import "./../assets/RouteHeader.css";
import "@fortawesome/fontawesome-free/css/all.css";

const RouteHeader = () => {
  return (
    <div className="header">
      <div className="pageTitle">
        <a href="/">react-router-dom Demo</a>
      </div>
      <div className="pageList">
        <a href="/">ProgressBar</a>
        <a href="/#/FetchAPI">FetchAPI</a>
        <a href="/#/DrawGame">DrawGame</a>
      </div>
    </div>
  );
};
export default RouteHeader;

 
修改 app.jsx

import React from "react";
import ReactDOM from "react-dom";
import DrawGame from "./src/views/DrawGame.jsx";
import ProgressBar from "./src/views/ProgressBar.jsx";
import FetchAPI from "./src/views/FetchAPI.jsx";
import RouteHeader from "./src/views/RouteHeader.jsx";
import "./index.js";
import { HashRouter, Route, Switch } from "react-router-dom";
ReactDOM.render(
  <div>
    <RouteHeader />
    <HashRouter>
      <Switch>
        <Route exact path="/" component={ProgressBar} />
        <Route path="/FetchAPI" component={FetchAPI} />
        <Route path="/DrawGame" component={DrawGame} />
      </Switch>
    </HashRouter>
  </div>,
  document.getElementById("root")
  );

實現方式主要就是在 <HashRouter> 路由設定上面加上另外寫的 <RouteHeader>，這樣就可以完成不管怎麼切換頁面都顯示的效果了。

參考文章
【React.js入門 - 27】 我要更多更多的分頁 - react-router-dom (上)