Skip to content

Instantly share code, notes, and snippets.

@ryanflorence
Created June 5, 2024 14:32
Show Gist options
  • Save ryanflorence/d268e87903ca248b67773c0ea47c0808 to your computer and use it in GitHub Desktop.
Save ryanflorence/d268e87903ca248b67773c0ea47c0808 to your computer and use it in GitHub Desktop.

You can leave them in the module scope and use the new types:

import {
-  LoaderFunctionArgs,
-  ActionFunctionArgs,
+  LoaderArgs,
+  ActionArgs
  useLoaderData,
+  defineRoute
} from '@remix-run/react'

-export async function loader({ request, params }: LoaderFunctionArgs) {
+async function loader({ request, params }: LoaderArgs) {
  // ...
}

-export async function action({ request, params }: ActionFunctionArgs) {
+async function action({ request, params }: ActionArgs) {
  // ...
}

-export default function SomeRoute() {
+function SomeRoute() {
  let data = useLoaderData<typeof loader>()
  // ...
}

+export default defineRoute({ loader, action, Component: SomeRoute })

Or move it all into defineRoute right away and get more type safety on params and just less "stuff" generally

- import {
-  LoaderFunctionArgs,
-  ActionFunctionArgs,
-  useLoaderData,
-} from '@remix-run/react'
+ import { defineRoute } from "@remix-run/react";

-export async function loader({ request, params }: LoaderFunctionArgs) {
-  // ...
-}

-export async function action({ request, params }: ActionFunctionArgs) {
-  // ...
-}

-export default function SomeRoute() {
-  let data = useLoaderData<typeof loader>()
-  // ...
-}

+export default defineRoute({
+  params: ['id'],
+  async loader() {
+    // ...
+  },
+  async action() {},
+  Component({ data }) {
+    // ...
+  },
+})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment