docs: update typegen paths

see #12284

Author: pcattori

docs/explanation/type-safety.md

@@ -24,7 +24,7 @@ export const routes: RouteConfig = [
 You can import route-specific types like so:
 
 ```tsx filename=app/routes/product.tsx
-import type { Route } from "./+types.product";
+import type { Route } from "./+types/product";
 // types generated for this route 👆
 
 export function loader({ params }: Route.LoaderArgs) {
@@ -66,7 +66,7 @@ The following types are generated for each route:
 ## How it works
 
 React Router's type generation executes your route config (`app/routes.ts` by default) to determine the routes for your app.
-It then generates a `+types.<route file>.d.ts` for each route within a special `.react-router/types/` directory.
+It then generates a `+types/<route file>.d.ts` for each route within a special `.react-router/types/` directory.
 With [`rootDirs` configured][setting-up-type-safety], TypeScript can import these generated files as if they were right next to their corresponding route modules.
 
 For a deeper dive into some of the design decisions, check out our [type inference decision doc](https://github.com/remix-run/react-router/blob/dev/decisions/0012-type-inference.md).

docs/how-to/file-uploads.md

@@ -106,7 +106,7 @@ import {
   fileStorage,
   getStorageKey,
 } from "~/avatar-storage.server";
-import type { Route } from "./+types.user";
+import type { Route } from "./+types/user";
 
 export async function action({
   request,

docs/how-to/form-validation.md

@@ -17,7 +17,7 @@ export const routes = [route("signup", "signup.tsx")];
 ```
 
 ```tsx filename=signup.tsx
-import type { Route } from "./+types.signup";
+import type { Route } from "./+types/signup";
 import { useFetcher } from "react-router";
 
 export default function Signup(_: Route.ComponentProps) {
@@ -43,7 +43,7 @@ export default function Signup(_: Route.ComponentProps) {
 In this step, we'll define a server `action` in the same file as our `Signup` component. Note that the aim here is to provide a broad overview of the mechanics involved rather than digging deep into form validation rules or error object structures. We'll use rudimentary checks for the email and password to demonstrate the core concepts.
 
 ```tsx filename=signup.tsx
-import type { Route } from "./+types.signup";
+import type { Route } from "./+types/signup";
 import { redirect, useFetcher, data } from "react-router";
 
 export default function Signup(_: Route.ComponentProps) {

docs/how-to/headers.md

@@ -13,7 +13,7 @@ If you need to return a custom HTTP status code or custom headers from your `loa
 
 ```tsx filename=app/product.tsx lines=[3,6-8,14,17-21]
 // route("products/:pid", "./product.tsx");
-import type { Route } from "./+types.product";
+import type { Route } from "./+types/product";
 import { data } from "react-router";
 import { fakeDb } from "../db";
 
@@ -42,7 +42,7 @@ If you need to return a custom HTTP status code or custom headers from your `act
 
 ```tsx filename=app/project.tsx lines=[3,11-14,19]
 // route('/projects/:projectId', './project.tsx')
-import type { Route } from "./+types.project";
+import type { Route } from "./+types/project";
 import { data } from "react-router";
 import { fakeDb } from "../db";
 

docs/how-to/react-server-components.md

@@ -12,7 +12,7 @@ In the future, async components can be rendered in loaders like any other data:
 
 ```tsx filename=app/product-page.tsx
 // route("products/:pid", "./product-page.tsx");
-import type { Route } from "./+types.product";
+import type { Route } from "./+types/product";
 import Product from "./product";
 import Reviews from "./reviews";
 

docs/how-to/resource-routes.md

@@ -17,7 +17,7 @@ route("/reports/pdf/:id", "pdf-report.ts");
 ```
 
 ```tsx filename=pdf-report.ts
-import * as Route from "./+types.pdf-report";
+import * as Route from "./+types/pdf-report";
 
 export async function loader({ params }: Route.LoaderArg) {
   const report = await getReport(params.id);
@@ -48,7 +48,7 @@ When linking to resource routes, use `<a>` or `<Link reloadDocument>`, otherwise
 GET requests are handled by the `loader`, while POST, PUT, PATCH, and DELETE are handled by the `action`:
 
 ```tsx
-import type { Route } from "./+types.resource";
+import type { Route } from "./+types/resource";
 
 export function loader(_: Route.LoaderArgs) {
   return new Response.json({ message: "I handle GET" });

docs/how-to/suspense.md

@@ -13,7 +13,7 @@ React Router supports React Suspense by returning promises from loaders and acti
 React Router awaits route loaders before rendering route components. To unblock the loader for non-critical data, return the promise instead of awaiting it in the loader.
 
 ```tsx
-import * as Route from "./+types.my-route";
+import * as Route from "./+types/my-route";
 
 export async function loader({}: Route.LoaderArg) {
   // note this is NOT awaited

docs/how-to/view-transitions.md

@@ -105,7 +105,7 @@ The detail view needs to use the same view transition names to create a seamless
 ```tsx filename=routes/image-details.tsx
 import { Link } from "react-router";
 import { images } from "./home";
-import type { Route } from "./+types.image-details";
+import type { Route } from "./+types/image-details";
 
 export default function ImageDetailsRoute({
   params,

docs/how-to/webhook.md

@@ -9,7 +9,7 @@ hidden: true
 Resource routes can be used to handle webhooks. For example, you can create a webhook that receives notifications from GitHub when a new commit is pushed to a repository:
 
 ```tsx
-import type { Route } from "./+types.github";
+import type { Route } from "./+types/github";
 
 import crypto from "node:crypto";
 

docs/start/framework/actions.md

@@ -15,7 +15,7 @@ Client actions only run in the browser and take priority over a server action wh
 
 ```tsx filename=app/project.tsx
 // route('/projects/:projectId', './project.tsx')
-import type { Route } from "./+types.project";
+import type { Route } from "./+types/project";
 import { Form } from "react-router";
 import { someApi } from "./api";
 
@@ -52,7 +52,7 @@ Server actions only run on the server and are removed from client bundles.
 
 ```tsx filename=app/project.tsx
 // route('/projects/:projectId', './project.tsx')
-import type { Route } from "./+types.project";
+import type { Route } from "./+types/project";
 import { Form } from "react-router";
 import { fakeDb } from "../db";