Skip to content

Commit 326993a

Browse files
brenelzbrenelz
committed
Merge branch 'main' into solid-hydration
2 parents d5b6e96 + 4693e0e commit 326993a

File tree

157 files changed

+1049
-1013
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

157 files changed

+1049
-1013
lines changed

‎docs/router/config.json‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@
3333
"label": "LLM Assistance Support",
3434
"to": "framework/react/llm-support"
3535
},
36+
{
37+
"label": "Comparison",
38+
"to": "framework/react/comparison"
39+
},
3640
{
3741
"label": "Frequently Asked Questions",
3842
"to": "framework/react/faq"
@@ -119,12 +123,12 @@
119123
"to": "framework/solid/installation/manual"
120124
},
121125
{
122-
"label": "Installation with Vite",
123-
"to": "framework/solid/routing/installation-with-vite"
126+
"label": "Vite",
127+
"to": "framework/solid/installation/with-vite"
124128
},
125129
{
126-
"label": "Installation with the Router CLI",
127-
"to": "framework/solid/routing/installation/with-router-cli"
130+
"label": "Router CLI",
131+
"to": "framework/solid/installation/with-router-cli"
128132
}
129133
]
130134
}

‎docs/router/framework/react/api/router/NavigateOptionsType.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ The `NavigateOptions` object accepts the following properties:
5050
- Optional
5151
- Defaults to `false`.
5252
- If `true`, navigation will be called using `document.startViewTransition()`.
53-
- If [`ViewTransitionOptions`](../ViewTransitionOptionsType.md), route navigations will be called using `document.startViewTransition({update, types})` where `types` will be the strings array passed with `ViewTransitionOptions["types"]`. If the browser does not support viewTransition types, the navigation will fall back to normal `document.startTransition()`, same as if `true` was passed.
53+
- If [`ViewTransitionOptions`](../ViewTransitionOptionsType.md), route navigations will be called using `document.startViewTransition({update, types})` where `types` will determine the strings array passed with `ViewTransitionOptions["types"]`. If the browser does not support viewTransition types, the navigation will fall back to normal `document.startTransition()`, same as if `true` was passed.
5454
- If the browser does not support this api, this option will be ignored.
5555
- See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) for more information on how this function works.
5656
- See [Google](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#view-transition-types) for more information on viewTransition types

‎docs/router/framework/react/api/router/ViewTransitionOptionsType.md‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,15 @@ The `ViewTransitionOptions` type is used to define a
88

99
```tsx
1010
interface ViewTransitionOptions {
11-
types: Array<string>
11+
types:
12+
| Array<string>
13+
| ((locationChangeInfo: {
14+
fromLocation?: ParsedLocation
15+
toLocation: ParsedLocation
16+
pathChanged: boolean
17+
hrefChanged: boolean
18+
hashChanged: boolean
19+
}) => Array<string> | false)
1220
}
1321
```
1422

@@ -18,6 +26,16 @@ The `ViewTransitionOptions` type accepts an object with a single property:
1826

1927
### `types` property
2028

21-
- Type: `Array<string>`
29+
- Type: `Array<string> | ((locationChangeInfo: {
30+
fromLocation?: ParsedLocation
31+
toLocation: ParsedLocation
32+
pathChanged: boolean
33+
hrefChanged: boolean
34+
hashChanged: boolean
35+
}) => (Array<string> | false))`
2236
- Required
23-
- The types array that will be passed to the `document.startViewTransition({update, types}) call`;
37+
- Either one of:
38+
- An array of strings that will be passed to the `document.startViewTransition({update, types}) call`
39+
- A function that accepts `locationChangeInfo` object and returns either:
40+
- An array of strings that will be passed to the `document.startViewTransition({update, types}) call`
41+
- or `false` to skip the view transition

‎docs/router/framework/react/comparison.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
---
2+
title: Comparison | TanStack Router & TanStack Start vs Next.js vs React Router / Remix
3+
toc: false
4+
---
5+
6+
Choosing a routing solution? This side‑by‑side comparison highlights key features, trade‑offs, and common use cases to help you quickly evaluate how each option fits your project’s needs.
7+
8+
While we aim to provide an accurate and fair comparison, please note that this table may not capture every nuance or recent update of each library. We recommend reviewing the official documentation and trying out each solution to make the most informed decision for your specific use case.
9+
10+
If you find any discrepancies or have suggestions for improvement, please don't hesitate to contribute via the "Edit this page on GitHub" link at the bottom of this page or open an issue in the [TanStack Router GitHub repository](https://github.com/TanStack/router).
11+
12+
Feature/Capability Key:
13+
14+
- ✅ 1st-class, built-in, and ready to use with no added configuration or code
15+
- 🟡 Partial Support (on a scale of 5)
16+
- 🟠 Supported via addon/community package
17+
- 🔶 Possible, but requires custom code/implementation/casting
18+
- 🛑 Not officially supported
19+
20+
| | TanStack Router / Start | React Router DOM [_(Website)_][router] | Next.JS [_(Website)_][nextjs] |
21+
| ---------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- | ----------------------------------------------------- |
22+
| Github Repo / Stars | [![][stars-tanstack-router]][gh-tanstack-router] | [![][stars-router]][gh-router] | [![][stars-nextjs]][gh-nextjs] |
23+
| Bundle Size | [![][bp-tanstack-router]][bpl-tanstack-router] | [![][bp-router]][bpl-router] | ❓ |
24+
| History, Memory & Hash Routers | ✅ | ✅ | 🛑 |
25+
| Nested / Layout Routes | ✅ | ✅ | 🟡 |
26+
| Suspense-like Route Transitions | ✅ | ✅ | ✅ |
27+
| Typesafe Routes | ✅ | 🟡 (1/5) | 🟡 |
28+
| Code-based Routes | ✅ | ✅ | 🛑 |
29+
| File-based Routes | ✅ | ✅ | ✅ |
30+
| Virtual/Programmatic File-based Routes | ✅ | ✅ | 🛑 |
31+
| Router Loaders | ✅ | ✅ | ✅ |
32+
| SWR Loader Caching | ✅ | 🛑 | ✅ |
33+
| Route Prefetching | ✅ | ✅ | ✅ |
34+
| Auto Route Prefetching | ✅ | ✅ | ✅ |
35+
| Route Prefetching Delay | ✅ | 🔶 | 🛑 |
36+
| Path Params | ✅ | ✅ | ✅ |
37+
| Typesafe Path Params | ✅ | ✅ | 🛑 |
38+
| Typesafe Route Context | ✅ | 🛑 | 🛑 |
39+
| Path Param Validation | ✅ | 🛑 | 🛑 |
40+
| Custom Path Param Parsing/Serialization | ✅ | 🛑 | 🛑 |
41+
| Ranked Routes | ✅ | ✅ | ✅ |
42+
| Active Link Customization | ✅ | ✅ | ✅ |
43+
| Optimistic UI | ✅ | ✅ | 🔶 |
44+
| Typesafe Absolute + Relative Navigation | ✅ | 🟡 (1/5 via `buildHref` util) | 🟠 (IDE plugin) |
45+
| Route Mount/Transition/Unmount Events | ✅ | 🛑 | 🛑 |
46+
| Devtools | ✅ | 🟠 | 🛑 |
47+
| Basic Search Params | ✅ | ✅ | ✅ |
48+
| Search Param Hooks | ✅ | ✅ | ✅ |
49+
| `<Link/>`/`useNavigate` Search Param API | ✅ | 🟡 (search-string only via the `to`/`search` options) | 🟡 (search-string only via the `to`/`search` options) |
50+
| JSON Search Params | ✅ | 🔶 | 🔶 |
51+
| TypeSafe Search Params | ✅ | 🛑 | 🛑 |
52+
| Search Param Schema Validation | ✅ | 🛑 | 🛑 |
53+
| Search Param Immutability + Structural Sharing | ✅ | 🔶 | 🛑 |
54+
| Custom Search Param parsing/serialization | ✅ | 🔶 | 🛑 |
55+
| Search Param Middleware | ✅ | 🛑 | 🛑 |
56+
| Suspense Route Elements | ✅ | ✅ | ✅ |
57+
| Route Error Elements | ✅ | ✅ | ✅ |
58+
| Route Pending Elements | ✅ | ✅ | ✅ |
59+
| `<Block>`/`useBlocker` | ✅ | 🔶 (no hard reloads or cross-origin navigation) | 🛑 |
60+
| Deferred Primitives | ✅ | ✅ | ✅ |
61+
| Navigation Scroll Restoration | ✅ | ✅ | ❓ |
62+
| ElementScroll Restoration | ✅ | 🛑 | 🛑 |
63+
| Async Scroll Restoration | ✅ | 🛑 | 🛑 |
64+
| Router Invalidation | ✅ | ✅ | ✅ |
65+
| Runtime Route Manipulation (Fog of War) | 🛑 | ✅ | ✅ |
66+
| Parallel Routes | 🛑 | 🛑 | ✅ |
67+
| -- | -- | -- | -- |
68+
| **Full Stack** | -- | -- | -- |
69+
| SSR | ✅ | ✅ | ✅ |
70+
| Streaming SSR | ✅ | ✅ | ✅ |
71+
| Generic RPCs | ✅ | 🛑 | 🛑 |
72+
| Generic RPC Middleware | ✅ | 🛑 | 🛑 |
73+
| React Server Functions | ✅ | 🛑 | ✅ |
74+
| React Server Function Middleware | ✅ | 🛑 | 🛑 |
75+
| API Routes | ✅ | ✅ | ✅ |
76+
| API Middleware | ✅ | ✅ | ✅ |
77+
| React Server Components | 🛑 | 🟡 (Experimental) | ✅ |
78+
| `<Form>` API | 🛑 | ✅ | ✅ |
79+
80+
[bp-tanstack-router]: https://badgen.net/bundlephobia/minzip/@tanstack/react-router
81+
[bpl-tanstack-router]: https://bundlephobia.com/result?p=@tanstack/react-router
82+
[gh-tanstack-router]: https://github.com/tanstack/router
83+
[stars-tanstack-router]: https://img.shields.io/github/stars/tanstack/router?label=%F0%9F%8C%9F
84+
[_]: _
85+
[router]: https://github.com/remix-run/react-router
86+
[bp-router]: https://badgen.net/bundlephobia/minzip/react-router
87+
[gh-router]: https://github.com/remix-run/react-router
88+
[stars-router]: https://img.shields.io/github/stars/remix-run/react-router?label=%F0%9F%8C%9F
89+
[bpl-router]: https://bundlephobia.com/result?p=react-router
90+
[bpl-history]: https://bundlephobia.com/result?p=history
91+
[_]: _
92+
[nextjs]: https://nextjs.org/docs/routing/introduction
93+
[bp-nextjs]: https://badgen.net/bundlephobia/minzip/next.js?label=All
94+
[gh-nextjs]: https://github.com/vercel/next.js
95+
[stars-nextjs]: https://img.shields.io/github/stars/vercel/next.js?label=%F0%9F%8C%9F
96+
[bpl-nextjs]: https://bundlephobia.com/result?p=next

‎docs/router/framework/react/guide/not-found-errors.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,8 @@ The not-found error above will be handled by the same route or nearest parent ro
166166

167167
If neither the route nor any suitable parent route is found to handle the error, the root route will handle it using TanStack Router's **extremely basic (and purposefully undesirable)** default not-found component that simply renders `<div>Not Found</div>`. It's highly recommended to either attach at least one `notFoundComponent` to the root route or configure a router-wide `defaultNotFoundComponent` to handle not-found errors.
168168

169+
> ⚠️ Throwing a notFound error in a beforeLoad method will always trigger the \_\_root notFoundComponent. Since beforeLoad methods are run prior to the route loader methods, there is no guarantee that any required data for layouts have successfully loaded before the error is thrown.
170+
169171
## Specifying Which Routes Handle Not Found Errors
170172

171173
Sometimes you may want to trigger a not-found on a specific parent route and bypass the normal not-found component propagation. To do this, pass in a route id to the `route` option in the `notFound` function.

0 commit comments

Comments
 (0)