chore: fix docs links (#113)

Author: MichaelDeBoey

_official-blog-tutorial/README.md

@@ -14,7 +14,7 @@ npx create-remix --template remix-run/indie-stack
 - Production-ready [SQLite Database](https://sqlite.org)
 - Healthcheck endpoint for [Fly backups region fallbacks](https://fly.io/docs/reference/configuration/#services-http_checks)
 - [GitHub Actions](https://github.com/features/actions) for deploy on merge to production and staging environments
-- Email/Password Authentication with [cookie-based sessions](https://remix.run/docs/en/v1/api/remix#createcookiesessionstorage)
+- Email/Password Authentication with [cookie-based sessions](https://remix.run/utils/sessions#createcookiesessionstorage)
 - Database ORM with [Prisma](https://prisma.io)
 - Styling with [Tailwind](https://tailwindcss.com/)
 - End-to-end testing with [Cypress](https://cypress.io)

basic/app/root.tsx

@@ -22,7 +22,7 @@ import darkStylesUrl from "~/styles/dark.css";
  * every route in the app, but individual routes can include their own links
  * that are automatically unloaded when a user navigates away from the route.
  *
- * https://remix.run/api/app#links
+ * https://remix.run/route/links
  */
 export const links: LinksFunction = () => {
   return [

basic/app/routes/demos/actions.tsx

@@ -8,7 +8,7 @@ export const meta: MetaFunction = () => ({
 });
 
 // When your form sends a POST, the action is called on the server.
-// - https://remix.run/api/conventions#action
+// - https://remix.run/route/action
 // - https://remix.run/guides/data-updates
 export const action = async ({ request }: ActionArgs) => {
   const formData = await request.formData();
@@ -34,7 +34,7 @@ export const action = async ({ request }: ActionArgs) => {
 };
 
 export default function ActionsDemo() {
-  // https://remix.run/api/remix#useactiondata
+  // https://remix.run/hooks/use-action-data
   const actionMessage = useActionData<typeof action>();
   const answerRef = useRef<HTMLInputElement>(null);
 
@@ -85,13 +85,11 @@ export default function ActionsDemo() {
           </li>
           <li>
             API:{" "}
-            <a href="https://remix.run/api/conventions#action">
-              Route Action Export
-            </a>
+            <a href="https://remix.run/route/action">Route Action Export</a>
           </li>
           <li>
             API:{" "}
-            <a href="https://remix.run/api/remix#useactiondata">
+            <a href="https://remix.run/hooks/use-action-data">
               <code>useActionData</code>
             </a>
           </li>

basic/app/routes/demos/params/$id.tsx

@@ -4,7 +4,7 @@ import { useCatch, useLoaderData } from "@remix-run/react";
 
 // The `$` in route filenames becomes a pattern that's parsed from the URL and
 // passed to your loaders so you can look up data.
-// - https://remix.run/api/conventions#loader-params
+// - https://remix.run/route/loader#params
 export const loader = async ({ params }: LoaderArgs) => {
   // pretend like we're using params.id to look something up in the db
 
@@ -47,9 +47,9 @@ export default function ParamDemo() {
   );
 }
 
-// https://remix.run/api/conventions#catchboundary
-// https://remix.run/api/remix#usecatch
-// https://remix.run/api/guides/not-found
+// https://remix.run/route/catch-boundary
+// https://remix.run/hooks/use-catch
+// https://remix.run/guides/not-found
 export function CatchBoundary() {
   const caught = useCatch();
 
@@ -91,8 +91,8 @@ export function CatchBoundary() {
   );
 }
 
-// https://remix.run/api/conventions#errorboundary
-// https://remix.run/api/guides/not-found
+// https://remix.run/route/error-boundary
+// https://remix.run/guides/not-found
 export function ErrorBoundary({ error }: { error: Error }) {
   console.error(error);
   return (

basic/app/routes/index.tsx

@@ -10,7 +10,7 @@ type IndexData = {
 // Loaders provide data to components and are only ever called on the server, so
 // you can connect to a database or run any server side code you want right next
 // to the component that renders it.
-// https://remix.run/api/conventions#loader
+// https://remix.run/route/loader
 export const loader = async () => {
   const data: IndexData = {
     resources: [
@@ -43,11 +43,11 @@ export const loader = async () => {
     ],
   };
 
-  // https://remix.run/api/remix#json
+  // https://remix.run/utils/json
   return json(data);
 };
 
-// https://remix.run/api/conventions#meta
+// https://remix.run/route/meta
 export const meta: MetaFunction = () => ({
   title: "Remix Starter",
   description: "Welcome to remix!",

catch-boundary/README.md

@@ -16,4 +16,4 @@ Check [app/routes/users/$userId.tsx](app/routes/users/$userId.tsx) to see the Ca
 
 ## Related Links
 
-- [CatchBoundary in the Remix Docs](https://remix.run/api/conventions#catchboundary)
+- [CatchBoundary in the Remix Docs](https://remix.run/route/catch-boundary)

combobox-resource-route/README.md

@@ -20,6 +20,6 @@ The relevant files are:
 
 ## Related Links
 
-- [useFetcher](https://remix.run/api/remix#usefetcher)
+- [useFetcher](https://remix.run/hooks/use-fetcher)
 - [Resource Routes](https://remix.run/guides/resource-routes)
 - [Reach UI Combobox](https://reach.tech/combobox)

combobox-resource-route/app/routes/index.tsx

@@ -12,7 +12,7 @@ import type { Lang } from "~/models/langs";
 
 export function links() {
   // Add them to the page when this route is active:
-  // https://remix.run/api/conventions#links
+  // https://remix.run/route/links
   return [{ rel: "stylesheet", href: comboboxStyles }];
 }
 

dark-mode/README.md

@@ -22,6 +22,6 @@ The Themed component is used to conditionally render two components depending on
 
 ## Related Links
 
-- [Creating cookie sessions in the Remix docs](https://remix.run/docs/en/v1/api/remix#createcookiesessionstorage)
-- [useFetcher in the Remix docs](https://remix.run/docs/en/v1/api/remix#usefetcher) (used to tell the server to update the cookie value when the theme changes)
-- [Blog post with complete explanation of each part of the code](https://www.mattstobbs.com/remix-dark-mode/)
+- [Creating cookie sessions in the Remix docs](https://remix.run/utils/sessions#createcookiesessionstorage)
+- [useFetcher in the Remix docs](https://remix.run/hooks/use-fetcher) (used to tell the server to update the cookie value when the theme changes)
+- [Blog post with complete explanation of each part of the code](https://www.mattstobbs.com/remix-dark-mode)

dataloader/README.md

@@ -2,7 +2,7 @@
 
 This example shows how to avoid redundant roundtrips to data sources via batching and caching, implemented with [DataLoader](https://github.com/graphql/dataloader). This comes in handy when there are multiple nested routes that depend on the same data source.
 
-Note that in many cases, you can meet the same requirement with Remix's own [useMatches](https://remix.run/docs/en/v1/api/remix#usematches) which lets you use all of your parent-routes' data in child routes. If that suits your use case, using `useMatches` is preferable. There are cases where this might not be the best fit though, including:
+Note that in many cases, you can meet the same requirement with Remix's own [useMatches](https://remix.run/hooks/use-matches) which lets you use all of your parent-routes' data in child routes. If that suits your use case, using `useMatches` is preferable. There are cases where this might not be the best fit though, including:
 
 - You can't be sure if a parent did already request a particular piece of data
 - You don't want your data loading to be tightly coupled with your parent routes, for architectural reasons
@@ -17,10 +17,10 @@ Open this example on [CodeSandbox](https://codesandbox.com):
 
 `app/data.server.ts` implements the `db` object which mimics an ORM in the style of [Prisma](https://www.prisma.io/). The method `db.user#findMany` logs _user#findMany_ to the console, for demo purposes.
 
-There's exactly one DataLoader factory `createUsersByIdLoader`, implemented in `app/loaders/userLoader.ts`. It's put on context of [createRequestHandler](https://remix.run/docs/en/v1/other-api/adapter#createrequesthandler) in `server/index.ts` as `usersById` which is made available to all Remix-loaders and -actions. Both the loaders of `app/routes/users.tsx` and `app/routes/users/index.tsx` make calls to this loader. When inspecting the server logs while refreshing the page, you'll notice that there's only one log _user#findMany_ per request, proving that with this implementation, there's only one rountrip to the database.
+There's exactly one DataLoader factory `createUsersByIdLoader`, implemented in `app/loaders/userLoader.ts`. It's put on context of [createRequestHandler](https://remix.run/other-api/adapter#createrequesthandler) in `server/index.ts` as `usersById` which is made available to all Remix-loaders and -actions. Both the loaders of `app/routes/users.tsx` and `app/routes/users/index.tsx` make calls to this loader. When inspecting the server logs while refreshing the page, you'll notice that there's only one log _user#findMany_ per request, proving that with this implementation, there's only one rountrip to the database.
 
 ## Related Links
 
 - [DataLoader docs](https://github.com/graphql/dataloader)
 - [DataLoader – Source code walkthrough [video]](https://youtu.be/OQTnXNCDywA), for those interested
-- Remix docs: [useMatches](https://remix.run/docs/en/v1/api/remix#usematches)
+- Remix docs: [useMatches](https://remix.run/hooks/use-matches)