(null);
+
+ // This form works without JavaScript, but when we have JavaScript we can make
+ // the experience better by selecting the input on wrong answers! Go ahead, disable
+ // JavaScript in your browser and see what happens.
+ useEffect(() => {
+ if (actionMessage && answerRef.current) {
+ answerRef.current.select();
+ }
+ }, [actionMessage]);
+
+ return (
+
+
+ Actions!
+
+ This form submission will send a post request that we handle in our
+ `action` export. Any route can export an action to handle data
+ mutations.
+
+
+
+
+
+ Additional Resources
+
+
+
You got it right! ;
+}
diff --git a/app/routes/demos/params.tsx b/app/routes/demos/params.tsx
new file mode 100644
index 000000000..e491c34de
--- /dev/null
+++ b/app/routes/demos/params.tsx
@@ -0,0 +1,43 @@
+import { useCatch, Link, json, useLoaderData, Outlet } from "remix";
+
+export function meta() {
+ return { title: "Boundaries Demo" };
+}
+
+export default function Boundaries() {
+ return (
+
+
+
+
+
+ Click these Links
+
+
+
+
+ one
+
+
+
+ two
+
+
+
+
+
+
+
+
+
+
+
+ The param is {data.param}
+
+ );
+}
+
+// https://remix.run/api/conventions#catchboundary
+// https://remix.run/api/remix#usecatch
+// https://remix.run/api/guides/not-found
+export function CatchBoundary() {
+ let caught = useCatch();
+
+ let message: React.ReactNode;
+ switch (caught.status) {
+ case 401:
+ message = (
+
+ Looks like you tried to visit a page that you do not have access to.
+ Maybe ask the webmaster ({caught.data.webmasterEmail}) for access.
+
+ );
+ case 404:
+ message = (
+ Looks like you tried to visit a page that does not exist.
+ );
+ default:
+ message = (
+
+ There was a problem with your request!
+
+ );
+ }
+
+ return (
+ <>
+ Oops!
+ {message}
+
+ (Isn't it cool that the user gets to stay in context and try a different
+ link in the parts of the UI that didn't blow up?)
+
+
+ );
+}
+
+// https://remix.run/api/conventions#errorboundary
+// https://remix.run/api/guides/not-found
+export function ErrorBoundary({ error }: { error: Error }) {
+ console.error(error);
+ return (
+ <>
+ Error!
+ {error.message}
+
+ (Isn't it cool that the user gets to stay in context and try a different
+ link in the parts of the UI that didn't blow up?)
+
+
+ );
+}
+
+export let meta: MetaFunction = ({ data }) => {
+ return {
+ title: data ? `Param: ${data.param}` : "Oops...",
+ };
+};
diff --git a/app/routes/demos/params/index.tsx b/app/routes/demos/params/index.tsx
new file mode 100644
index 000000000..c59e28a1a
--- /dev/null
+++ b/app/routes/demos/params/index.tsx
@@ -0,0 +1,40 @@
+import { useCatch, Link, json, useLoaderData, Outlet } from "remix";
+import type { LoaderFunction } from "remix";
+
+export default function Boundaries() {
+ return (
+ <>
+ Params
+
+ When you name a route segment with $ like{" "}
+ routes/users/$userId.js, the $ segment will be parsed from
+ the URL and sent to your loaders and actions by the same name.
+
+ Errors
+
+ When a route throws and error in it's action, loader, or component,
+ Remix automatically catches it, won't even try to render the component,
+ but it will render the route's ErrorBoundary instead. If the route
+ doesn't have one, it will bubble up to the routes above it until it hits
+ the root.
+
+ So be as granular as you want with your error handling.
+ Not Found
+
+ (and other{" "}
+
+ client errors
+
+ )
+
+
+ Loaders and Actions can throw a Response instead of an
+ error and Remix will render the CatchBoundary instead of the component.
+ This is great when loading data from a database isn't found. As soon as
+ you know you can't render the component normally, throw a 404 response
+ and send your app into the catch boundary. Just like error boundaries,
+ catch boundaries bubble, too.
+
+
+ );
+}
diff --git a/app/routes/index.tsx b/app/routes/index.tsx
new file mode 100644
index 000000000..75b4ace7d
--- /dev/null
+++ b/app/routes/index.tsx
@@ -0,0 +1,100 @@
+import type { MetaFunction, LoaderFunction } from "remix";
+import { useLoaderData, json, Link } from "remix";
+
+type IndexData = {
+ resources: Array<{ name: string; url: string }>;
+ demos: Array<{ name: string; to: string }>;
+};
+
+// 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
+export let loader: LoaderFunction = () => {
+ let data: IndexData = {
+ resources: [
+ {
+ name: "Remix Docs",
+ url: "https://remix.run/docs"
+ },
+ {
+ name: "React Router Docs",
+ url: "https://reactrouter.com/docs"
+ },
+ {
+ name: "Remix Discord",
+ url: "https://discord.gg/VBePs6d"
+ }
+ ],
+ demos: [
+ {
+ to: "demos/actions",
+ name: "Actions"
+ },
+ {
+ to: "demos/about",
+ name: "Nested Routes, CSS loading/unloading"
+ },
+ {
+ to: "demos/params",
+ name: "URL Params and Error Boundaries"
+ }
+ ]
+ };
+
+ // https://remix.run/api/remix#json
+ return json(data);
+};
+
+// https://remix.run/api/conventions#meta
+export let meta: MetaFunction = () => {
+ return {
+ title: "Remix Starter",
+ description: "Welcome to remix!"
+ };
+};
+
+// https://remix.run/guides/routing#index-routes
+export default function Index() {
+ let data = useLoaderData();
+
+ return (
+
+
+ Welcome to Remix!
+ We're stoked that you're here. 🥳
+
+ Feel free to take a look around the code to see how Remix does things,
+ it might be a bit different than what you’re used to. When you're
+ ready to dive deeper, we've got plenty of resources to get you
+ up-and-running quickly.
+
+
+ Check out all the demos in this starter, and then just delete the{" "}
+ app/routes/demos and app/styles/demos{" "}
+ folders when you're ready to turn this into your next project.
+
+
+
+ Demos In This App
+
+ {data.demos.map(demo => (
+
+
+ ))}
+
+ Resources
+
+
+