今天我幫App做了兩個大的升級：加入 React Router，把原本塞在一起的功能拆成不同頁面；同時完善多幣別的換算與顯示。

用 React Router 把 App 拆成不同頁面
前面的記帳 App 大部分功能都集中在同一個畫面，功能越加越多後，畫面也開始變得擁擠。
所以這次加入 React Router，把功能拆成三個頁面：

• HomePage：記帳明細、搜尋與篩選
• StatsPage：財務分析圖表與預算
• SettingsPage：系統主要幣別設定

首先在 main.jsx 使用 BrowserRouter 包住整個 App：

這樣 React Router 才能知道目前的網址與頁面狀態。

接著在 App.jsx 使用 Routes 和 Route 進行頁面分流：

重點：「元件拆分」和「頁面拆分」其實是不同層次的架構。
之前是把 App.jsx 拆成不同 Component，現在則是進一步把不同功能拆成不同 Page。

RWD 導覽列
加入多頁面後，也需要一個方便切換頁面的 Navbar。
根據我的設計藍圖，導覽列會依照裝置大小有不同的呈現方式：

• 電腦版 → 放在內容上方
• 手機版 → 固定在畫面最下方

手機版：

這樣手機使用時，導覽列會一直黏在底部，不需要一直滑回最上面才能換頁。

到了電腦版，再利用 Media Query 把固定定位解除：

其實在做這個功能的時候我才知道，原來同一個元件可以透過 RWD，呈現出完全不同的版面。

考慮「主要幣別」
前一天完成了外幣輸入與換算後，今天進一步加入了「主要結算幣別」。
在設定那邊，使用者可以選擇主要幣別:

例如使用者可以在設定頁選擇：主要幣別：USD
這時候 App 裡其他幣別的金額，就需要轉換成 USD。

但我又不希望原本輸入的金額消失，所以最後採用的顯示方式是：

• 主要金額 → 永遠顯示使用者原本輸入的金額與幣別
• 括號金額 → 只有原始幣別和主要幣別不同時才顯示換算結果
  就像是這樣…
  USD 100(≈ TWD 3,226)

在明細列表中，我也使用 JSX 的條件渲染來判斷要不要顯示括號金額：

真正顯示時：

只有條件成立時，後面的 JSX 才會出現。

在這邊展示一下成果：

總結：

• React Router：使用 BrowserRouter、Routes 和 Route 建立多頁面架構。
• Page 與 Component 的差別：Component 負責較小的功能區塊，Page 則可以負責一個完整頁面。
• RWD Hybrid Navbar：手機固定在底部，電腦則放回內容上方。
• JSX 條件渲染：使用 && 控制換算後的附註是否顯示。
  從原本「所有功能都在同一頁」，到現在開始有首頁、統計、設定、導覽列和主要幣別系統，整個網頁也越來越接近一個真正的Web App。