React 團隊近日正式宣布棄用 Create React App（CRA），為填補 CRA 的空白，TanStack（以 React Query 聞名的前端工具集）迅速推出全新腳手架 create-tsrouter-app。本文就來看看 create-tsrouter-app 的亮點以及 React 棄用 Create React App 之后帶來的一些爭議和改變。

本文省流版： 

React 團隊棄用 Create React App 后，TanStack 迅速推出 create-tsrouter-app 腳手架，集成 Vite、React Query、TanStack Router等現代化技術，為 SPA 開發提供最佳實踐。

React 官方對框架的執著推薦引發了社區爭議，社區呼吁提供更多輕量級工具選擇（如 Vite）。Redux 核心維護者對文檔提出了PR，建議平衡使用框架與常用工具，目前 React 團隊已采納大部分建議，并更新了官方文檔。

create-tsrouter-app

create-tsrouter-app 以 Vite 為核心，提供了 CRA 的所有功能，整合了包括 React Query、TanStack Router 在內的多項現代化技術，為 SPA 開發提供開箱即用的最佳實踐方案。

圖片

可以使用以下命令來創建基于 TypeScript 的 SPA 應用：

npx create-tsrouter-app@latest my-app --template typescript

目前，該腳手架通過了多個參數：

• 如果想要 Tailwind，只需添加--tailwind
• 如果想要選擇包管理器（npm``bun``yarn``pnpm），只需添加--package-manager
• 如果需要基于文件的路由，只需添加 --template file-router

TanStack

TanStack 作為一個使用廣泛的高質量前端工具集，提供了包括狀態管理、路由、數據可視化在內的多種庫和工具，其中 React Query 尤為知名。

圖片

作為此腳手架的核心，TanStack Router 憑借以下特性成為 React Router 的理想替代品：

• 極致的類型安全

自動推斷路由參數、查詢參數與導航狀態，實現端到端的 TypeScript 支持。

編譯時校驗路徑匹配，徹底消除路徑拼寫錯誤和參數類型不匹配問題。

• 數據驅動式路由設計
• 內置 SWR 緩存策略的路由加載器，支持預加載與數據緩存。
• 深度兼容 React Query/SWR，天然適配客戶端數據緩存場景。
• 企業級路由架構
• 文件系統路由生成：通過目錄結構自動映射路由，簡化維護成本（類似 Next.js）。
• 嵌套布局與異步路由：支持動態加載組件與錯誤邊界，優化首屏性能。
• 中間件擴展：可在路由匹配、加載階段插入權限校驗、日志等邏輯。
• 高級狀態管理
• 類型安全的查詢參數 API：支持復雜對象序列化與驗證（如日期、枚舉）。
• 基于 JSON 的查詢參數管理：替代 URLSearchParams，避免手動編解碼。

橫向對比：TanStack Router vs React Router vs Next.js：

圖片

圖片

圖片

可以看到，TanStack Router 在很多方面都遠遠優于 React Router，不管你用不用 create-tsrouter-app 來創建新項目，TanStack Router 都值的嘗試，以替代有點 out 的 React Router。

圖片

React 框架爭議

React 官方一直鼓勵使用 React 框架來創建新項目，但在實際開發中，對于許多單頁應用（SPA）來說，使用 Vite 等輕量級工具可能更為合適。

對于 React 官方對框架的執著推薦，社區也出現很多不滿的聲音：

• 尤雨溪表示，官方的推薦很糟糕：

1. 建議當前的 CRA用戶直接遷移到框架是一個糟糕的建議。這會使他們面臨比當前設置更加復雜的局面，并大大增加遷移的成本和風險。
2. 也不能用“他們應該使用框架，因為框架包含路由和數據獲取功能”來為這一建議辯解，因為如果他們需要這些功能，很可能已經在使用CRA的基礎上，通過自己選擇的解決方案實現了這些功能。與其將這些功能遷移到可能以完全不同方式處理這些問題的框架中，最明顯且最直接的方法是，用類似但更現代、性能更好的工具來替換CRA。

圖片

• Munawwar Firoz 表示，誰會推薦這些（截圖）作為遷移路徑呢？這可比僅僅替換構建相關的部分（比如使用最受歡迎的 Vite，或者是rsbuild、parcel 等）要困難得多。

圖片

對此，Redux 的核心維護者 Mark Erikson 總結了社區上的意見，并重寫了官方文檔中 創建一個 React 應用 部分，已經向 React 倉庫提了 PR：https://github.com/reactjs/react.dev/pull/7618。

圖片

在新文檔中，不僅對推薦 React 框架部分進行了更詳細的解釋，還新增了從頭開始 部分，推薦使用 Vite、Rsbuild、Parcel 來作為構建工具，使用 React Router、TanStack Router 作為路由工具，使用 React Query、SWR、RTK Query 作為數據獲取工具。

圖片

這才是一個更好的平衡：

• 仍然建議將框架作為默認設置，并解釋具體原因。
• 為學習者或想要更簡單設置的開發者提供指導，并推薦常用工具 。

目前，React 團隊已經采用了這個 PR 的大部分建議，并在文檔中新增了一頁“從頭開始構建React應用”。

圖片