[React] react-router-dom 實做練習

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

 
首先安裝 react-router-dom

 
完成之後調整 app.jsx

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

ReactDOM.render(
  

    
      
        
        
        
      
    
  
,
  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 (
    

      

        react-router-dom Demo
      
      

        ProgressBar
        FetchAPI
        DrawGame
      
    
  );
};
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(
  

    
    
      
        
        
        
      
    
  
,
  document.getElementById("root")
  );

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

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