Navigates? | declarative? | Makes GET, triggers loader | Makes POST, triggers action | No requests |
---|---|---|---|---|
navigates | declarative | <Link to=""> <Form method="get"> |
<Form method="post"> |
<Link to="#..."> |
navigates | imperative | navigate() setSearchParams() |
submit() |
navigate("#") |
stays | declarative | <fetcher.Form method="get"> |
<fetcher.Form method="post"> |
(doesn't make sense) |
s |
import { createHash } from "crypto"; | |
import fs from "fs"; | |
import fsp from "fs/promises"; | |
import path from "path"; | |
import https from "https"; | |
import { PassThrough } from "stream"; | |
import type { Readable } from "stream"; | |
import type { LoaderFunction } from "remix"; | |
import sharp from "sharp"; | |
import type { Request as NodeRequest } from "@remix-run/node"; |
The latest release of Remix fixes sourcemaps so you no longer need to use any hacks to set breakpoints in your route modules. Simply start the debugger and Remix will hit the breakpoint in your loaders and actions.
Debugging session even survives edits and Live Reload.
An important part of "routing" is handling redirects. Redirects usually happen when you want to preserve an old link and send all the traffic bound for that destination to some new URL so you don't end up with broken links.
The way we recommend handling redirects has changed in React Router v6. This document explains why.
In React Router v4/5 (they have the same API, you can read about why we had to bump the major version here) we had a <Redirect>
component that you could use to tell the router when to automatically redirect to another URL. You might have used it like this:
type CacheMetadata = { | |
createdTime: number | |
maxAge: number | null | |
expires: number | null | |
} | |
function shouldRefresh(metadata: CacheMetadata) { | |
if (metadata.maxAge) { | |
return Date.now() > metadata.createdTime + metadata.maxAge | |
} |
This is no longer needed! Remix's built-in types have improved significantly. But I'll keep this here for historical reasons.
Typed helpers for low-boilerplate type inference with Remix data.
- I suffix them with *Typed so I don't accidentally import the core remix helpers.
- This doesn't support regular Response objects to prevent accidentally using them with the typed helpers.
There are two primary approaches to page transitions (ignoring suspense's ditched attempt at a third)
- Indefinitely wait on the old screen
- Transition immediately to spinners/skeleton
Right now Remix has picked #1, but with a new export to a route module, we could support both.
Today, if you have this, Remix will wait for all data to load before displaying the page
Things to note to make this work:
- you'll need to have your remix registry token available in your shell under
REMIX_TOKEN
- you'll need to add secrets to your GitHub repo for the following items:
REMIX_TOKEN
VERCEL_TOKEN
(https://vercel.com/account/tokens)VERCEL_ORG_ID
VERCEL_PROJECT_ID
- you'll need to have your
REMIX_TOKEN
available in your vercel repo as an environment variable
/** | |
* The Anatomy of a Remix Route | |
*/ | |
import { parseFormBody, json, redirect } from "@remix-run/data"; | |
import { | |
Form, | |
useRouteData, | |
usePendingFormSubmit, | |
preload, | |
} from "@remix-run/react"; |
{ | |
"name": "workshop-setup", | |
"version": "1.0.0", | |
"description": "This is the common setup script for most of my workshops", | |
"bin": "./setup.js" | |
} |