Merge branch 'main' into release-next

Author: brophdawg11

contributors.yml

@@ -1,4 +1,5 @@
 - 0xEddie
+- 3fuyang
 - aarbi
 - abdallah-nour
 - abeadam
@@ -224,6 +225,7 @@
 - mathpaquette
 - matmilbury
 - matt-harro
+- matteogauthier
 - matthewlynch
 - maximevtush
 - maxpou
@@ -293,6 +295,7 @@
 - rtmann
 - rtzll
 - rubeonline
+- ruidi-huang
 - ryanflorence
 - ryanhiebert
 - saengmotmi
@@ -314,6 +317,7 @@
 - shivamsinghchahar
 - silvenon
 - SimenB
+- SirDaev
 - SkayuX
 - skratchdot
 - smff
@@ -365,6 +369,7 @@
 - valerii15298
 - ValiantCat
 - vdusart
+- vesan
 - VictorElHajj
 - vijaypushkin
 - vikingviolinist

docs/how-to/fetchers.md

@@ -219,10 +219,10 @@ export function UserSearchCombobox() {
 
 ```tsx lines=[2,5]
 import { useFetcher } from "react-router";
-import type { Search } from "./search-users";
+import type { loader } from "./search-users";
 
 export function UserSearchCombobox() {
-  let fetcher = useFetcher<typeof Search.action>();
+  let fetcher = useFetcher<typeof loader>();
   // ...
 }
 ```
@@ -235,7 +235,7 @@ Ensure you use `import type` so you only import the types.
 import { useFetcher } from "react-router";
 
 export function UserSearchCombobox() {
-  let fetcher = useFetcher<typeof Search.action>();
+  let fetcher = useFetcher<typeof loader>();
   return (
     <div>
       <fetcher.Form method="get" action="/search-users">
@@ -261,7 +261,7 @@ Note you will need to hit "enter" to submit the form and see the results.
 import { useFetcher } from "react-router";
 
 export function UserSearchCombobox() {
-  let fetcher = useFetcher<typeof Search.action>();
+  let fetcher = useFetcher<typeof loader>();
   return (
     <div>
       <fetcher.Form method="get" action="/search-users">

docs/how-to/view-transitions.md

@@ -20,13 +20,37 @@ The simplest way to enable view transitions is by adding the `viewTransition` pr
 
 Without any additional CSS, this provides a basic cross-fade animation between pages.
 
+### 2. Enable view transitions with programmatic navigation
+
+When using programmatic navigation with the `useNavigate` hook, you can enable view transitions by passing the `viewTransition: true` option:
+
+```tsx
+import { useNavigate } from "react-router";
+
+function NavigationButton() {
+  const navigate = useNavigate();
+
+  return (
+    <button
+      onClick={() =>
+        navigate("/about", { viewTransition: true })
+      }
+    >
+      About
+    </button>
+  );
+}
+```
+
+This provides the same cross-fade animation as using the `viewTransition` prop on Link components.
+
 For more information on using the View Transitions API, please refer to the ["Smooth transitions with the View Transition API" guide][view-transitions-guide] from the Google Chrome team.
 
 ## Image Gallery Example
 
 Let's build an image gallery that demonstrates how to trigger and use view transitions. We'll create a list of images that expand into a detail view with smooth animations.
 
-### 2. Create the image gallery route
+### 1. Create the image gallery route
 
 ```tsx filename=routes/image-gallery.tsx
 import { NavLink } from "react-router";
@@ -62,7 +86,7 @@ export default function ImageGalleryRoute() {
 }
 ```
 
-### 3. Add transition styles
+### 2. Add transition styles
 
 Define view transition names and animations for elements that should transition smoothly between routes.
 
@@ -98,7 +122,7 @@ Define view transition names and animations for elements that should transition
 }
 ```
 
-### 4. Create the image detail route
+### 3. Create the image detail route
 
 The detail view needs to use the same view transition names to create a seamless animation.
 
@@ -122,7 +146,7 @@ export default function ImageDetailsRoute({
 }
 ```
 
-### 5. Add matching transition styles for the detail view
+### 4. Add matching transition styles for the detail view
 
 ```css filename=app.css
 /* Match transition names from the list view */

docs/start/data/custom.md

@@ -9,7 +9,7 @@ order: 8
 
 ## Introduction
 
-Instead of using `@react-router/dev`, you can integrate React Router's framework features (like loaders, actions, fetchers, etc.) into your own bundler and server abstractions with Data Mode..
+Instead of using `@react-router/dev`, you can integrate React Router's framework features (like loaders, actions, fetchers, etc.) into your own bundler and server abstractions with Data Mode.
 
 ## Client Rendering
 

docs/start/data/data-loading.md

@@ -15,7 +15,7 @@ Data is provided to route components from route loaders:
 createBrowserRouter([
   {
     path: "/",
-    loader: () => {
+    loader: async () => {
       // return data from here
       return { records: await getSomeRecords() };
     },

docs/start/data/testing.md

@@ -5,4 +5,4 @@ order: 9
 
 # Testing
 
-You can use `createRoutesStub` in data and framework modes. Please refer to the [Testing Guide](../framework/testing.md).
+You can use `createRoutesStub` in data and framework modes. Please refer to the [Testing Guide](../framework/testing).

docs/tutorials/address-book.md

@@ -688,7 +688,7 @@ export default function SidebarLayout() {
 
 👉 **Move route definitions under the sidebar layout**
 
-We can define a `layout` route to automatically render the sidebar for all matched routes within in. This is basically what our `root` was, but now we can scope it to specific routes.
+We can define a `layout` route to automatically render the sidebar for all matched routes within it. This is basically what our `root` was, but now we can scope it to specific routes.
 
 ```ts filename=app/routes.ts lines=[4,9,12]
 import type { RouteConfig } from "@react-router/dev/routes";

packages/create-react-router/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## 7.6.0
 
+_No changes_
+
 ## 7.5.3
 
 _No changes_