框架
版本

对比 | TanStack Router & TanStack Start vs Next.js vs React Router / Remix

在您选择新工具之前,了解它与竞争对手的对比总是很有帮助的!

此对比表力求尽可能准确和公正。如果您使用这些库中的任何一个并认为信息可以改进,请随时使用页面底部的"在 GitHub 上编辑此页面"链接提出更改建议(附上说明或声明证据)。

功能/能力说明:

  • ✅ 一流的、内置的,无需额外配置或代码即可使用
  • 🟡 部分支持(5 分制)
  • 🟠 通过插件/社区包支持
  • 🔶 可能的,但需要自定义代码/实现/转换
  • 🛑 不受官方支持
TanStack Router / StartReact Router DOM (Website)Next.JS (Website)
Github 仓库 / Stars
包大小❓
History, Memory & Hash Routers✅✅🛑
Nested / Layout Routes✅✅🟡
Suspense-like Route Transitions✅✅✅
Typesafe Routes✅🟡 (1/5)🟡
Code-based Routes✅✅🛑
File-based Routes✅✅✅
Virtual/Programmatic File-based Routes✅✅🛑
Router Loaders✅✅✅
SWR Loader Caching✅🛑✅
Route Prefetching✅✅✅
Auto Route Prefetching✅✅✅
Route Prefetching Delay✅🔶🛑
Path Params✅✅✅
Typesafe Path Params✅✅🛑
Typesafe Route Context✅🛑🛑
Path Param Validation✅🛑🛑
Custom Path Param Parsing/Serialization✅🛑🛑
Ranked Routes✅✅✅
Active Link Customization✅✅✅
Optimistic UI✅✅🔶
Typesafe Absolute + Relative Navigation✅🟡 (1/5 via buildHref util)🟠 (IDE plugin)
Route Mount/Transition/Unmount Events✅🛑🛑
Devtools✅🟠🛑
Basic Search Params✅✅✅
Search Param Hooks✅✅✅
<Link/>/useNavigate Search Param API✅🟡 (search-string only via the to/search options)🟡 (search-string only via the to/search options)
JSON Search Params✅🔶🔶
TypeSafe Search Params✅🛑🛑
Search Param Schema Validation✅🛑🛑
Search Param Immutability + Structural Sharing✅🔶🛑
Custom Search Param parsing/serialization✅🔶🛑
Search Param Middleware✅🛑🛑
Suspense Route Elements✅✅✅
Route Error Elements✅✅✅
Route Pending Elements✅✅✅
<Block>/useBlocker✅🔶 (no hard reloads or cross-origin navigation)🛑
Deferred Primitives✅✅✅
Navigation Scroll Restoration✅✅❓
ElementScroll Restoration✅🛑🛑
Async Scroll Restoration✅🛑🛑
Router Invalidation✅✅✅
Runtime Route Manipulation (Fog of War)🛑✅✅
Parallel Routes🛑🛑✅
--------
全栈------
SSR✅✅✅
Streaming SSR✅✅✅
Generic RPCs✅🛑🛑
Generic RPC Middleware✅🛑🛑
React Server Functions✅🛑✅
React Server Function Middleware✅🛑🛑
API Routes✅✅✅
API Middleware✅🛑✅
React Server Components🛑🟡 (Experimental)✅
<Form> API🛑✅✅