@tanstack/react-router 1.129.8 → 1.130.0

package/dist/llms/rules/guide.js

@@ -164,6 +164,22 @@ You can _optionally_, also use the [Non-Redirected Authentication](#non-redirect
 
 This approach can also be used in conjunction with Pathless or Layout Route to protect all routes under their parent route.
 
+## Related How-To Guides
+
+For detailed, step-by-step implementation guides, see:
+
+- [How to Set Up Basic Authentication](../how-to/setup-authentication.md) - Complete setup with React Context and protected routes
+- [How to Integrate Authentication Providers](../how-to/setup-auth-providers.md) - Use Auth0, Clerk, or Supabase
+- [How to Set Up Role-Based Access Control](../how-to/setup-rbac.md) - Implement permissions and role-based routing
+
+## Examples
+
+Working authentication examples are available in the repository:
+
+- [Basic Authentication Example](https://github.com/TanStack/router/tree/main/examples/react/authenticated-routes) - Simple authentication with context
+- [Firebase Authentication](https://github.com/TanStack/router/tree/main/examples/react/authenticated-routes-firebase) - Firebase Auth integration
+- [TanStack Start Auth Examples](https://github.com/TanStack/router/tree/main/examples/react) - Various auth implementations with TanStack Start
+
 # Automatic Code Splitting
 
 The automatic code splitting feature in TanStack Router allows you to optimize your application's bundle size by lazily loading route components and their associated data. This is particularly useful for large applications where you want to minimize the initial load time by only loading the necessary code for the current route.
@@ -361,7 +377,7 @@ export default defineConfig({
 })
 \`\`\`
 
-We highly discourage splitting the \`loader\` unless you have a specific use case that requires it. In most cases, keeping the \`loader\` bundled with the component is the best choice for performance.
+We highly discourage splitting the \`loader\` unless you have a specific use case that requires it. In most cases, not splitting off the \`loader\` and keep it in the main bundle is the best choice for performance.
 
 # Code Splitting
 
@@ -376,7 +392,6 @@ Code splitting and lazy loading is a powerful technique for improving the bundle
 TanStack Router separates code into two categories:
 
 - **Critical Route Configuration** - The code that is required to render the current route and kick off the data loading process as early as possible.
-
   - Path Parsing/Serialization
   - Search Param Validation
   - Loaders, Before Load
@@ -796,59 +811,38 @@ Here are some examples of how you can use \`createLink\` with third-party librar
 
 ### React Aria Components example
 
-React Aria Components'
-[Link](https://react-spectrum.adobe.com/react-aria/Link.html) component does not support the standard \`onMouseEnter\` and \`onMouseLeave\` events.
-Therefore, you cannot use it directly with TanStack Router's \`preload (intent)\` prop.
+React Aria Components v1.11.0 and later works with TanStack Router's \`preload (intent)\` prop. Use \`createLink\` to wrap each React Aria component that you use as a link.
 
-Explanation for this can be found here:
+\`\`\`tsx
+import { createLink } from '@tanstack/react-router'
+import { Link as RACLink, MenuItem } from 'react-aria-components'
 
-- [https://react-spectrum.adobe.com/react-aria/interactions.html](https://react-spectrum.adobe.com/react-aria/interactions.html)
-- [https://react-spectrum.adobe.com/blog/building-a-button-part-2.html](https://react-spectrum.adobe.com/blog/building-a-button-part-2.html)
+export const Link = createLink(RACLink)
+export const MenuItemLink = createLink(MenuItem)
+\`\`\`
 
-It is possible to work around this by using the [useLink](https://react-spectrum.adobe.com/react-aria/useLink.html) hook from [React Aria Hooks](https://react-spectrum.adobe.com/react-aria/hooks.html) with a standard anchor element.
+To use React Aria's render props, including the \`className\`, \`style\`, and \`children\` functions, create a wrapper component and pass that to \`createLink\`.
 
 \`\`\`tsx
-import * as React from 'react'
-import { createLink, LinkComponent } from '@tanstack/react-router'
-import {
-  mergeProps,
-  useFocusRing,
-  useHover,
-  useLink,
-  useObjectRef,
-} from 'react-aria'
-import type { AriaLinkOptions } from 'react-aria'
+import { createLink } from '@tanstack/react-router'
+import { Link as RACLink, type LinkProps } from 'react-aria-components'
 
-interface RACLinkProps extends Omit<AriaLinkOptions, 'href'> {
-  children?: React.ReactNode
+interface MyLinkProps extends LinkProps {
+  // your props
 }
 
-const RACLinkComponent = React.forwardRef<HTMLAnchorElement, RACLinkProps>(
-  (props, forwardedRef) => {
-    const ref = useObjectRef(forwardedRef)
-
-    const { isPressed, linkProps } = useLink(props, ref)
-    const { isHovered, hoverProps } = useHover(props)
-    const { isFocusVisible, isFocused, focusProps } = useFocusRing(props)
-
-    return (
-      <a
-        {...mergeProps(linkProps, hoverProps, focusProps, props)}
-        ref={ref}
-        data-hovered={isHovered || undefined}
-        data-pressed={isPressed || undefined}
-        data-focus-visible={isFocusVisible || undefined}
-        data-focused={isFocused || undefined}
-      />
-    )
-  },
-)
-
-const CreatedLinkComponent = createLink(RACLinkComponent)
-
-export const CustomLink: LinkComponent<typeof RACLinkComponent> = (props) => {
-  return <CreatedLinkComponent preload={'intent'} {...props} />
+function MyLink(props: MyLinkProps) {
+  return (
+    <RACLink
+      {...props}
+      style={({ isHovered }) => ({
+        color: isHovered ? 'red' : 'blue',
+      })}
+    />
+  )
 }
+
+export const Link = createLink(MyLink)
 \`\`\`
 
 ### Chakra UI example
@@ -2112,9 +2106,9 @@ export const Route = createRootRoute({
         children: \`p {
                   color: blue;
                   background-color: yellow;
-                }\`
-      }
-    ]
+                }\`,
+      },
+    ],
     scripts: [
       {
         src: 'https://www.google-analytics.com/analytics.js',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.129.8",
+  "version": "1.130.0",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -79,8 +79,8 @@
     "isbot": "^5.1.22",
     "tiny-invariant": "^1.3.3",
     "tiny-warning": "^1.0.3",
-    "@tanstack/history": "1.129.7",
-    "@tanstack/router-core": "1.129.8"
+    "@tanstack/router-core": "1.130.0",
+    "@tanstack/history": "1.129.7"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

package/src/Matches.tsx

@@ -67,6 +67,7 @@ export function Matches() {
 }
 
 function MatchesInner() {
+  const router = useRouter()
   const matchId = useRouterState({
     select: (s) => {
       return s.matches[0]?.id
@@ -77,21 +78,27 @@ function MatchesInner() {
     select: (s) => s.loadedAt,
   })
 
+  const matchComponent = matchId ? <Match matchId={matchId} /> : null
+
   return (
     <matchContext.Provider value={matchId}>
-      <CatchBoundary
-        getResetKey={() => resetKey}
-        errorComponent={ErrorComponent}
-        onCatch={(error) => {
-          warning(
-            false,
-            `The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!`,
-          )
-          warning(false, error.message || error.toString())
-        }}
-      >
-        {matchId ? <Match matchId={matchId} /> : null}
-      </CatchBoundary>
+      {router.options.disableGlobalCatchBoundary ? (
+        matchComponent
+      ) : (
+        <CatchBoundary
+          getResetKey={() => resetKey}
+          errorComponent={ErrorComponent}
+          onCatch={(error) => {
+            warning(
+              false,
+              `The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!`,
+            )
+            warning(false, error.message || error.toString())
+          }}
+        >
+          {matchComponent}
+        </CatchBoundary>
+      )}
     </matchContext.Provider>
   )
 }