{{#var entity = generators.createEntity(name)}}
{{#var routeFileName = string(entity.name).ext('.tsx').toString()}}

{{{
  exports({
    to: app.makePath('resources/react_app/routes', routeFileName)
  })
}}}
{{#if imports.router}}
import { {{imports.router}} } from 'react-router'
{{/if}}
{{#if imports.localType}}
import { {{imports.localType}} } from './+types/{{entity.name}}'
{{/if}}
{{{#if flags.loader}}}

export async function loader({ context }: Route.LoaderArgs) {
  const { http, make } = context
  return {
    message: 'Hello from ' + http.request.completeUrl(),
  }
}
{{{/if}}}
{{#if flags["client-loader"]}}

export async function clientLoader({ serverLoader }: Route.ClientLoaderArgs) {
  // call the server loader
  const serverData = await serverLoader();
  // And/or fetch data on the client
  const data = getDataFromClient();
  // Return the data to expose through clientLoaderData
  return data;
}
{{/if}}
{{#if flags.action}}
export async function action({ context }: Route.ActionArgs) {
  const { http, make } = context
  return null
}

{{/if}}
{{#if flags["client-action"]}}

export async function clientAction({ serverAction }: Route.ClientActionArgs) {
  // invalidateClientSideCache()
  const data = await serverAction()
  return data
}
{{/if}}
{{#if flags.meta}}

export function meta({ }: Route.MetaArgs) {
  return [{ title: '{{{name}}}' }, { name: 'description', content: 'Route {{{name}}}' }]
}
{{/if}}
{{#if flags.headers}}

export function headers({ }: Route.HeadersArgs) {
  return {
    "X-Stretchy-Pants": "its for fun",
    "Cache-Control": "max-age=300, s-maxage=3600",
  };
}
{{/if}}

export default function Page({ }: Route.ComponentProps) {
  return <div>New route</div>
}
{{#if flags['error-boundary']}}

export function ErrorBoundary() {
  const error = useRouteError();

  if (isRouteErrorResponse(error)) {
    return (
      <div>
        <h1>
          {error.status} {error.statusText}
        </h1>
        <p>{error.data}</p>
      </div>
    );
  } else if (error instanceof Error) {
    return (
      <div>
        <h1>Error</h1>
        <p>{error.message}</p>
        <p>The stack trace is:</p>
        <pre>{error.stack}</pre>
      </div>
    );
  } else {
    return <h1>Unknown Error</h1>;
  }
}
{{/if}}