xixixao/_index.jsx

## _index.jsx
import { Link } from "@remix-run/react";
import { useQuery } from "../../convex/_generated/react";

export const meta = () => {
  return [{ title: "New Remix App" }];
};

export default function Index() {
  const tasks = useQuery("getTasks");
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
      {tasks?.map(({ _id, text }) => (
        <div key={_id.toString()}>{text}</div>
      ))}
      <Link to="/test">Hello</Link>
    </div>
  );
}

## root.jsx
import {
  ClerkApp,
  ClerkCatchBoundary,
  SignInButton,
  UserButton,
} from "@clerk/remix";
import { rootAuthLoader } from "@clerk/remix/ssr.server";
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
  isRouteErrorResponse,
  useLoaderData,
  useRouteError,
} from "@remix-run/react";
import {
  RemixRootDefaultCatchBoundary,
  RemixRootDefaultErrorBoundary,
} from "@remix-run/react/dist/errorBoundaries";
import {
  AuthLoading,
  Authenticated,
  ConvexReactClient,
  Unauthenticated,
} from "convex/react";
import { ConvexProviderWithClerk } from "convex/react-clerk";
import { useMemo } from "react";

export const loader = (args) => {
  return rootAuthLoader(args, () => ({
    ENV: {
      CONVEX_URL: process.env.CONVEX_URL,
    },
  }));
};

export const CatchBoundary = ClerkCatchBoundary();

function App() {
  const {
    ENV: { CONVEX_URL },
  } = useLoaderData();
  const convex = useMemo(() => new ConvexReactClient(CONVEX_URL), [CONVEX_URL]);
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <ConvexProviderWithClerk client={convex}>
          <Tester />
          <Outlet />
        </ConvexProviderWithClerk>
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

function Tester() {
  return (
    <div>
      <Unauthenticated>
        <SignInButton mode="modal" />
      </Unauthenticated>
      <Authenticated>
        User:
        <UserButton />
      </Authenticated>
      <AuthLoading>...</AuthLoading>
    </div>
  );
}

// Fix for Clerk and Remix 1.15, see https://github.com/clerkinc/javascript/issues/965#issuecomment-1516836522
export const ErrorBoundary = () => {
  const error = useRouteError();
  if (isRouteErrorResponse(error)) {
    const { __clerk_ssr_interstitial_html } =
      error?.data?.clerkState?.__internal_clerk_state || {};
    if (__clerk_ssr_interstitial_html) {
      return (
        <html
          dangerouslySetInnerHTML={{ __html: __clerk_ssr_interstitial_html }}
        />
      );
    }
    //  Current CatchBoundary Component
    return <RemixRootDefaultCatchBoundary />;
  } else if (error instanceof Error) {
    return <RemixRootDefaultErrorBoundary error={error} />;
  } else {
    let errorString =
      error == null
        ? "Unknown Error"
        : typeof error === "object" && "toString" in error
        ? error.toString()
        : JSON.stringify(error);
    return <RemixRootDefaultErrorBoundary error={new Error(errorString)} />;
  }
};
export default ClerkApp(App);
	import { Link } from "@remix-run/react";
	import { useQuery } from "../../convex/_generated/react";

	export const meta = () => {
	return [{ title: "New Remix App" }];
	};

	export default function Index() {
	const tasks = useQuery("getTasks");
	return (
	<div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
	{tasks?.map(({ _id, text }) => (
	<div key={_id.toString()}>{text}</div>
	))}
	<Link to="/test">Hello</Link>
	</div>
	);
	}
	import {
	ClerkApp,
	ClerkCatchBoundary,
	SignInButton,
	UserButton,
	} from "@clerk/remix";
	import { rootAuthLoader } from "@clerk/remix/ssr.server";
	import {
	Links,
	LiveReload,
	Meta,
	Outlet,
	Scripts,
	ScrollRestoration,
	isRouteErrorResponse,
	useLoaderData,
	useRouteError,
	} from "@remix-run/react";
	import {
	RemixRootDefaultCatchBoundary,
	RemixRootDefaultErrorBoundary,
	} from "@remix-run/react/dist/errorBoundaries";
	import {
	AuthLoading,
	Authenticated,
	ConvexReactClient,
	Unauthenticated,
	} from "convex/react";
	import { ConvexProviderWithClerk } from "convex/react-clerk";
	import { useMemo } from "react";

	export const loader = (args) => {
	return rootAuthLoader(args, () => ({
	ENV: {
	CONVEX_URL: process.env.CONVEX_URL,
	},
	}));
	};

	export const CatchBoundary = ClerkCatchBoundary();

	function App() {
	const {
	ENV: { CONVEX_URL },
	} = useLoaderData();
	const convex = useMemo(() => new ConvexReactClient(CONVEX_URL), [CONVEX_URL]);
	return (
	<html lang="en">
	<head>
	<meta charSet="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	<Meta />
	<Links />
	</head>
	<body>
	<ConvexProviderWithClerk client={convex}>
	<Tester />
	<Outlet />
	</ConvexProviderWithClerk>
	<ScrollRestoration />
	<Scripts />
	<LiveReload />
	</body>
	</html>
	);
	}

	function Tester() {
	return (
	<div>
	<Unauthenticated>
	<SignInButton mode="modal" />
	</Unauthenticated>
	<Authenticated>
	User:
	<UserButton />
	</Authenticated>
	<AuthLoading>...</AuthLoading>
	</div>
	);
	}

	// Fix for Clerk and Remix 1.15, see https://github.com/clerkinc/javascript/issues/965#issuecomment-1516836522
	export const ErrorBoundary = () => {
	const error = useRouteError();
	if (isRouteErrorResponse(error)) {
	const { __clerk_ssr_interstitial_html } =
	error?.data?.clerkState?.__internal_clerk_state \|\| {};
	if (__clerk_ssr_interstitial_html) {
	return (
	<html
	dangerouslySetInnerHTML={{ __html: __clerk_ssr_interstitial_html }}
	/>
	);
	}
	// Current CatchBoundary Component
	return <RemixRootDefaultCatchBoundary />;
	} else if (error instanceof Error) {
	return <RemixRootDefaultErrorBoundary error={error} />;
	} else {
	let errorString =
	error == null
	? "Unknown Error"
	: typeof error === "object" && "toString" in error
	? error.toString()
	: JSON.stringify(error);
	return <RemixRootDefaultErrorBoundary error={new Error(errorString)} />;
	}
	};
	export default ClerkApp(App);