React Router 2.0 瀏覽器環境報錯：缺少 Webpack 編譯 JSX

直接在瀏覽器中引入 browser.min.js (Babel 獨立版) 轉譯 JSX 雖可運行簡單範例，但 React Router 2.0 依賴模組系統 (CommonJS/ESM) 與 browserHistory 等 API，純瀏覽器環境無法正確解析 require/import，導致「模組未定義」或「history 未定義」錯誤。

根本原因

React Router 2.0 設計為搭配打包工具 (Webpack、Browserify、Rollup) 使用，原始碼採用模組化寫法，需經過打包才能在瀏覽器運行。ReactRouter.min.js 若為未打包的源碼，瀏覽器無法執行。

標準專案啟動流程

1. npm init -y 初始化專案。
2. npm install react react-dom react-router@2.0.0 安裝依賴。
3. 配置 webpack.config.js：entry 指向主 JSX，output 輸出 bundle.js，module.rules 使用 babel-loader 轉譯 JSX/ES6。
4. npx webpack --mode development 打包，或 webpack serve 啟動開發伺服器。
5. HTML 引入打包後的 bundle.js 而非源碼。

快速體驗替代方案

若只想快速驗證路由邏輯，可使用 CodeSandbox、StackBlitz 線上 IDE，內建 Webpack，新建 React 專案即可直接寫 Router 2.0 代碼。