From 27c93cbdc1342548c8623943140f794fdb797f82 Mon Sep 17 00:00:00 2001 From: Thomas Gauvin <35609369+thomasgauvin@users.noreply.github.com> Date: Wed, 18 Dec 2024 15:43:13 -0500 Subject: [PATCH 01/11] docs(community/contributing): improvements for docs changes (#12573) * thomasgauvin: add documentation on how to contribute to the developer docs * Update contributors.yml * Simplify docs contributing instructions --------- Co-authored-by: Brooks Lybrand --- contributors.yml | 1 + docs/community/contributing.md | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/contributors.yml b/contributors.yml index 789480eae5..3f4e420123 100644 --- a/contributors.yml +++ b/contributors.yml @@ -282,6 +282,7 @@ - thepedroferrari - thethmuu - thisiskartik +- thomasgauvin - thomasverleye - ThornWu - tiborbarsi diff --git a/docs/community/contributing.md b/docs/community/contributing.md index a5b0535741..bdd8660ec7 100644 --- a/docs/community/contributing.md +++ b/docs/community/contributing.md @@ -65,6 +65,10 @@ All commits that fix bugs or add features need a test. All commits that change or add to the API must be done in a pull request that also updates all relevant examples and docs. +Documentation is located in the `docs` directory. Once changes make their way into the `main` branch, they will automatically be published to the docs site. + +If you want to preview how the changes will look on the docs site, clone the [`react-router-website` repository](https://github.com/remix-run/react-router-website) and follow the instructions in `README.md` to view your changes locally. + ## Development ### Packages From aa6d022458b80de403f2ee6d1e5b96632fac8ac9 Mon Sep 17 00:00:00 2001 From: Matt Hampel Date: Thu, 19 Dec 2024 10:09:26 -0500 Subject: [PATCH 02/11] docs(start/framework/installation): remove duplicate sentence (#12586) --- contributors.yml | 1 + docs/start/framework/installation.md | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/contributors.yml b/contributors.yml index 3f4e420123..d513d5b600 100644 --- a/contributors.yml +++ b/contributors.yml @@ -110,6 +110,7 @@ - GraxMonzo - GuptaSiddhant - haivuw +- hampelm - hernanif1 - holynewbie - hongji00 diff --git a/docs/start/framework/installation.md b/docs/start/framework/installation.md index 6f7b3203e1..0ceac268d7 100644 --- a/docs/start/framework/installation.md +++ b/docs/start/framework/installation.md @@ -15,7 +15,6 @@ React Router v7 requires the following minimum versions: -Most projects start with a template. Let's use a basic template maintained by React Router: Most projects start with a template. Let's use a basic template maintained by React Router: ```shellscript nonumber From 13827521ebede1ca772ac45a29d8d5e50701385d Mon Sep 17 00:00:00 2001 From: Alex Anderson Date: Thu, 19 Dec 2024 08:16:38 -0700 Subject: [PATCH 03/11] docs(how-to/spa): add more details about generating the `index.html` (#12592) * Update spa.md to include more details about generating the index.html * Update docs/how-to/spa.md --------- Co-authored-by: Brooks Lybrand --- docs/how-to/spa.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/how-to/spa.md b/docs/how-to/spa.md index a19299ddca..2b21cd7c86 100644 --- a/docs/how-to/spa.md +++ b/docs/how-to/spa.md @@ -71,4 +71,4 @@ In contrast `react-router build` (with server rendering disabled) pre-renders yo - Use React components to generate the initial page users see - Re-enable server rendering later without changing anything about your UI -This is also why your project still needs a dependency on `@react-router/node`. +React Router will still server render your index route to generate that `index.html` file. This is why your project still needs a dependency on `@react-router/node` and your routes need to be SSR-safe. That means you can't call `window` or other browser-only APIs during the initial render, even when server rendering is disabled. From 968873a7e9b24d6921deaf6892b0efe22b4486d8 Mon Sep 17 00:00:00 2001 From: Harsh Mangalam <57381638+harshmangalam@users.noreply.github.com> Date: Thu, 19 Dec 2024 20:51:30 +0530 Subject: [PATCH 04/11] docs(upgrading/component-routes): add note to add `.react-router` to `.gitignore` (#12591) * ignore .react-router * decorate with note * Update contributors.yml --------- Co-authored-by: harshslated --- contributors.yml | 1 + docs/upgrading/component-routes.md | 2 ++ 2 files changed, 3 insertions(+) diff --git a/contributors.yml b/contributors.yml index d513d5b600..d972070da2 100644 --- a/contributors.yml +++ b/contributors.yml @@ -326,3 +326,4 @@ - yuleicul - zeromask1337 - zheng-chuang +- harshmangalam diff --git a/docs/upgrading/component-routes.md b/docs/upgrading/component-routes.md index 07cbfce3ad..bb0fdecfca 100644 --- a/docs/upgrading/component-routes.md +++ b/docs/upgrading/component-routes.md @@ -257,6 +257,8 @@ At this point you should be able to to boot the app and see the root layout. } ``` +> Note: Make sure to add `/.react-router/` to your `.gitignore` file to avoid tracking unnecessary files in your repository. + Now make sure you can boot your app at this point before moving on: ```shellscript From 45139a16bd2a1d9374310654b246aefcd3776dc0 Mon Sep 17 00:00:00 2001 From: "remix-cla-bot[bot]" <92060565+remix-cla-bot[bot]@users.noreply.github.com> Date: Thu, 19 Dec 2024 15:21:33 +0000 Subject: [PATCH 05/11] chore: sort contributors list --- contributors.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/contributors.yml b/contributors.yml index d972070da2..4d485f5ec2 100644 --- a/contributors.yml +++ b/contributors.yml @@ -111,6 +111,7 @@ - GuptaSiddhant - haivuw - hampelm +- harshmangalam - hernanif1 - holynewbie - hongji00 @@ -326,4 +327,3 @@ - yuleicul - zeromask1337 - zheng-chuang -- harshmangalam From 9279fd30c8c8b2f5b33755792bc7f1adb7b3b5df Mon Sep 17 00:00:00 2001 From: Brooks Lybrand Date: Thu, 19 Dec 2024 09:31:50 -0600 Subject: [PATCH 06/11] docs(upgrading): improve callout for .gitignore --- docs/upgrading/component-routes.md | 10 ++++++++-- docs/upgrading/router-provider.md | 8 ++++++++ 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/docs/upgrading/component-routes.md b/docs/upgrading/component-routes.md index bb0fdecfca..39ca8634b1 100644 --- a/docs/upgrading/component-routes.md +++ b/docs/upgrading/component-routes.md @@ -257,14 +257,20 @@ At this point you should be able to to boot the app and see the root layout. } ``` -> Note: Make sure to add `/.react-router/` to your `.gitignore` file to avoid tracking unnecessary files in your repository. - Now make sure you can boot your app at this point before moving on: ```shellscript npm run dev ``` +You will probably want to add `.react-router/` to your `.gitignore` file to avoid tracking unnecessary files in your repository. + +```txt +.react-router/ +``` + +You can checkout [Type Safety][type-safety] to learn how to fully setup and use autogenerated type safety for params, loader data, and more. + ## 8. Render your app To get back to rendering your app, we'll update the "catchall" route we setup earlier that matches all URLs so that your existing `` get a chance to render. diff --git a/docs/upgrading/router-provider.md b/docs/upgrading/router-provider.md index 17ee5694c3..aada0c1496 100644 --- a/docs/upgrading/router-provider.md +++ b/docs/upgrading/router-provider.md @@ -412,6 +412,14 @@ Now make sure you can boot your app at this point before moving on: npm run dev ``` +You will probably want to add `.react-router/` to your `.gitignore` file to avoid tracking unnecessary files in your repository. + +```txt +.react-router/ +``` + +You can checkout [Type Safety][type-safety] to learn how to fully setup and use autogenerated type safety for params, loader data, and more. + ## Enable SSR and/or Pre-rendering If you want to enable server rendering and static pre-rendering, you can do so with the `ssr` and `prerender` options in the bundler plugin. For SSR you'll need to also deploy the server build to a server. See [Deploying][deploying] for more information. From bb60137889f75251517be897efe2cd5cb1b4c9c7 Mon Sep 17 00:00:00 2001 From: Brooks Lybrand Date: Fri, 20 Dec 2024 08:12:05 -0600 Subject: [PATCH 07/11] docs(upgrading/v6): Clarify partialHydration (#12594) --- docs/upgrading/v6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/upgrading/v6.md b/docs/upgrading/v6.md index 883f6adf3f..514a5af3e5 100644 --- a/docs/upgrading/v6.md +++ b/docs/upgrading/v6.md @@ -197,7 +197,7 @@ If any of your code is checking for lowercase HTTP methods, you will need to upd If you are not using a `` you can skip this -This allows SSR frameworks to provide only partial hydration data. It's unlikely you need to worry about this, just turn the flag on. [View the CHANGELOG](https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#partial-hydration) for more information. +This enables partial hydration of a data router which is primarily used for SSR frameworks, but it is also useful if you are using `lazy` to load your route modules. It's unlikely you need to worry about this, just turn the flag on. [View the CHANGELOG](https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#partial-hydration) for more information. 👉 **Enable the Flag** From 91479115888cf7167e8d228472acb586d1feb6e3 Mon Sep 17 00:00:00 2001 From: Brooks Lybrand Date: Fri, 20 Dec 2024 08:24:48 -0600 Subject: [PATCH 08/11] docs: sessions and cookies (#12595) * docs: sessions and cookies * Fix variable shadowing in example --- docs/explanation/sessions-and-cookies.md | 463 +++++++++++++++++++++++ 1 file changed, 463 insertions(+) create mode 100644 docs/explanation/sessions-and-cookies.md diff --git a/docs/explanation/sessions-and-cookies.md b/docs/explanation/sessions-and-cookies.md new file mode 100644 index 0000000000..b9da0e3407 --- /dev/null +++ b/docs/explanation/sessions-and-cookies.md @@ -0,0 +1,463 @@ +--- +title: Sessions and Cookies +--- + +# Sessions and Cookies + +## Sessions + +Sessions are an important part of websites that allow the server to identify requests coming from the same person, especially when it comes to server-side form validation or when JavaScript is not on the page. Sessions are a fundamental building block of many sites that let users "log in", including social, e-commerce, business, and educational websites. + +When using React Router as your framework, sessions are managed on a per-route basis (rather than something like express middleware) in your `loader` and `action` methods using a "session storage" object (that implements the [`SessionStorage`][session-storage] interface). Session storage understands how to parse and generate cookies, and how to store session data in a database or filesystem. + +### Using Sessions + +This is an example of a cookie session storage: + +```ts filename=app/sessions.server.ts +import { createCookieSessionStorage } from "react-router"; + +type SessionData = { + userId: string; +}; + +type SessionFlashData = { + error: string; +}; + +const { getSession, commitSession, destroySession } = + createCookieSessionStorage( + { + // a Cookie from `createCookie` or the CookieOptions to create one + cookie: { + name: "__session", + + // all of these are optional + domain: "reactrouter.com", + // Expires can also be set (although maxAge overrides it when used in combination). + // Note that this method is NOT recommended as `new Date` creates only one date on each server deployment, not a dynamic date in the future! + // + // expires: new Date(Date.now() + 60_000), + httpOnly: true, + maxAge: 60, + path: "/", + sameSite: "lax", + secrets: ["s3cret1"], + secure: true, + }, + } + ); + +export { getSession, commitSession, destroySession }; +``` + +We recommend setting up your session storage object in `app/sessions.server.ts` so all routes that need to access session data can import from the same spot. + +The input/output to a session storage object are HTTP cookies. `getSession()` retrieves the current session from the incoming request's `Cookie` header, and `commitSession()`/`destroySession()` provide the `Set-Cookie` header for the outgoing response. + +You'll use methods to get access to sessions in your `loader` and `action` functions. + +After retrieving a session with `getSession`, the returned session object has a handful of methods and properties: + +```tsx +export async function action({ + request, +}: ActionFunctionArgs) { + const session = await getSession( + request.headers.get("Cookie") + ); + session.get("foo"); + session.has("bar"); + // etc. +} +``` + +See the [Session API][session-api] for more all the methods available on the session object. + +### Login form example + +A login form might look something like this: + +```tsx filename=app/routes/login.tsx lines=[4-7,12-14,16,22,25,33-35,46,51,56,61] +import { data, redirect } from "react-router"; +import type { Route } from "./+types/login"; + +import { + getSession, + commitSession, +} from "../sessions.server"; + +export async function loader({ + request, +}: Route.LoaderArgs) { + const session = await getSession( + request.headers.get("Cookie") + ); + + if (session.has("userId")) { + // Redirect to the home page if they are already signed in. + return redirect("/"); + } + + return data( + { error: session.get("error") }, + { + headers: { + "Set-Cookie": await commitSession(session), + }, + } + ); +} + +export async function action({ + request, +}: Route.ActionArgs) { + const session = await getSession( + request.headers.get("Cookie") + ); + const form = await request.formData(); + const username = form.get("username"); + const password = form.get("password"); + + const userId = await validateCredentials( + username, + password + ); + + if (userId == null) { + session.flash("error", "Invalid username/password"); + + // Redirect back to the login page with errors. + return redirect("/login", { + headers: { + "Set-Cookie": await commitSession(session), + }, + }); + } + + session.set("userId", userId); + + // Login succeeded, send them to the home page. + return redirect("/", { + headers: { + "Set-Cookie": await commitSession(session), + }, + }); +} + +export default function Login({ + loaderData, +}: Route.ComponentProps) { + const { error } = loaderData; + + return ( +
+ {error ?
{error}
: null} +
+
+

Please sign in

+
+ + +
+
+ ); +} +``` + +And then a logout form might look something like this: + +```tsx filename=app/routes/logout.tsx +import { + getSession, + destroySession, +} from "../sessions.server"; +import type { Route } from "./+types/logout"; + +export async function action({ + request, +}: Route.ActionArgs) { + const session = await getSession( + request.headers.get("Cookie") + ); + return redirect("/login", { + headers: { + "Set-Cookie": await destroySession(session), + }, + }); +} + +export default function LogoutRoute() { + return ( + <> +

Are you sure you want to log out?

+
+ +
+ Never mind + + ); +} +``` + +It's important that you logout (or perform any mutation for that matter) in an `action` and not a `loader`. Otherwise you open your users to [Cross-Site Request Forgery][csrf] attacks. + +### Session Gotchas + +Because of nested routes, multiple loaders can be called to construct a single page. When using `session.flash()` or `session.unset()`, you need to be sure no other loaders in the request are going to want to read that, otherwise you'll get race conditions. Typically if you're using flash, you'll want to have a single loader read it, if another loader wants a flash message, use a different key for that loader. + +### Creating custom session storage + +React Router makes it easy to store sessions in your own database if needed. The [`createSessionStorage()`][create-session-storage] API requires a `cookie` (for options for creating a cookie, see [cookies][cookies]) and a set of create, read, update, and delete (CRUD) methods for managing the session data. The cookie is used to persist the session ID. + +- `createData` will be called from `commitSession` on the initial session creation when no session ID exists in the cookie +- `readData` will be called from `getSession` when a session ID exists in the cookie +- `updateData` will be called from `commitSession` when a session ID already exists in the cookie +- `deleteData` is called from `destroySession` + +The following example shows how you could do this using a generic database client: + +```ts +import { createSessionStorage } from "react-router"; + +function createDatabaseSessionStorage({ + cookie, + host, + port, +}) { + // Configure your database client... + const db = createDatabaseClient(host, port); + + return createSessionStorage({ + cookie, + async createData(data, expires) { + // `expires` is a Date after which the data should be considered + // invalid. You could use it to invalidate the data somehow or + // automatically purge this record from your database. + const id = await db.insert(data); + return id; + }, + async readData(id) { + return (await db.select(id)) || null; + }, + async updateData(id, data, expires) { + await db.update(id, data); + }, + async deleteData(id) { + await db.delete(id); + }, + }); +} +``` + +And then you can use it like this: + +```ts +const { getSession, commitSession, destroySession } = + createDatabaseSessionStorage({ + host: "localhost", + port: 1234, + cookie: { + name: "__session", + sameSite: "lax", + }, + }); +``` + +The `expires` argument to `createData` and `updateData` is the same `Date` at which the cookie itself expires and is no longer valid. You can use this information to automatically purge the session record from your database to save on space, or to ensure that you do not otherwise return any data for old, expired cookies. + +### Additional session utils + +There are also several other session utilities available if you need them: + +- [`isSession`][is-session] +- [`createMemorySessionStorage`][create-memory-session-storage] +- [`createSession`][create-session] (custom storage) +- [`createFileSessionStorage`][create-file-session-storage] (node) +- [`createWorkersKVSessionStorage`][create-workers-kv-session-storage] (Cloudflare Workers) +- [`createArcTableSessionStorage`][create-arc-table-session-storage] (architect, Amazon DynamoDB) + +## Cookies + +A [cookie][cookie] is a small piece of information that your server sends someone in a HTTP response that their browser will send back on subsequent requests. This technique is a fundamental building block of many interactive websites that adds state so you can build authentication (see [sessions][sessions]), shopping carts, user preferences, and many other features that require remembering who is "logged in". + +React Router's [`Cookie` interface][cookie-api] provides a logical, reusable container for cookie metadata. + +### Using cookies + +While you may create these cookies manually, it is more common to use a [session storage][sessions]. + +In React Router, you will typically work with cookies in your `loader` and/or `action` functions, since those are the places where you need to read and write data. + +Let's say you have a banner on your e-commerce site that prompts users to check out the items you currently have on sale. The banner spans the top of your homepage, and includes a button on the side that allows the user to dismiss the banner so they don't see it for at least another week. + +First, create a cookie: + +```ts filename=app/cookies.server.ts +import { createCookie } from "react-router"; + +export const userPrefs = createCookie("user-prefs", { + maxAge: 604_800, // one week +}); +``` + +Then, you can `import` the cookie and use it in your `loader` and/or `action`. The `loader` in this case just checks the value of the user preference so you can use it in your component for deciding whether to render the banner. When the button is clicked, the `
` calls the `action` on the server and reloads the page without the banner. + +### User preferences example + +```tsx filename=app/routes/home.tsx lines=[4,9-11,18-20,29] +import { Link, Form, redirect } from "react-router"; +import type { Route } from "./+types/home"; + +import { userPrefs } from "../cookies.server"; + +export async function loader({ + request, +}: Route.LoaderArgs) { + const cookieHeader = request.headers.get("Cookie"); + const cookie = + (await userPrefs.parse(cookieHeader)) || {}; + return { showBanner: cookie.showBanner }; +} + +export async function action({ + request, +}: Route.ActionArgs) { + const cookieHeader = request.headers.get("Cookie"); + const cookie = + (await userPrefs.parse(cookieHeader)) || {}; + const bodyParams = await request.formData(); + + if (bodyParams.get("bannerVisibility") === "hidden") { + cookie.showBanner = false; + } + + return redirect("/", { + headers: { + "Set-Cookie": await userPrefs.serialize(cookie), + }, + }); +} + +export default function Home({ + loaderData, +}: Route.ComponentProps) { + return ( +
+ {loaderData.showBanner ? ( +
+ Don't miss our sale! + + + + +
+ ) : null} +

Welcome!

+
+ ); +} +``` + +### Cookie attributes + +Cookies have [several attributes][cookie-attrs] that control when they expire, how they are accessed, and where they are sent. Any of these attributes may be specified either in `createCookie(name, options)`, or during `serialize()` when the `Set-Cookie` header is generated. + +```ts +const cookie = createCookie("user-prefs", { + // These are defaults for this cookie. + path: "/", + sameSite: "lax", + httpOnly: true, + secure: true, + expires: new Date(Date.now() + 60_000), + maxAge: 60, +}); + +// You can either use the defaults: +cookie.serialize(userPrefs); + +// Or override individual ones as needed: +cookie.serialize(userPrefs, { sameSite: "strict" }); +``` + +Please read [more info about these attributes][cookie-attrs] to get a better understanding of what they do. + +### Signing cookies + +It is possible to sign a cookie to automatically verify its contents when it is received. Since it's relatively easy to spoof HTTP headers, this is a good idea for any information that you do not want someone to be able to fake, like authentication information (see [sessions][sessions]). + +To sign a cookie, provide one or more `secrets` when you first create the cookie: + +```ts +const cookie = createCookie("user-prefs", { + secrets: ["s3cret1"], +}); +``` + +Cookies that have one or more `secrets` will be stored and verified in a way that ensures the cookie's integrity. + +Secrets may be rotated by adding new secrets to the front of the `secrets` array. Cookies that have been signed with old secrets will still be decoded successfully in `cookie.parse()`, and the newest secret (the first one in the array) will always be used to sign outgoing cookies created in `cookie.serialize()`. + +```ts filename=app/cookies.server.ts +export const cookie = createCookie("user-prefs", { + secrets: ["n3wsecr3t", "olds3cret"], +}); +``` + +```tsx filename=app/routes/my-route.tsx +import { data } from "react-router"; +import { cookie } from "../cookies.server"; +import type { Route } from "./+types/my-route"; + +export async function loader({ + request, +}: Route.LoaderArgs) { + const oldCookie = request.headers.get("Cookie"); + // oldCookie may have been signed with "olds3cret", but still parses ok + const value = await cookie.parse(oldCookie); + + return data("...", { + headers: { + // Set-Cookie is signed with "n3wsecr3t" + "Set-Cookie": await cookie.serialize(value), + }, + }); +} +``` + +### Additional cookie utils + +There are also several other cookie utilities available if you need them: + +- [`isCookie`][is-cookie] +- [`createCookie`][create-cookie] + +To learn more about each attribute, please see the [MDN Set-Cookie docs][cookie-attrs]. + +[csrf]: https://developer.mozilla.org/en-US/docs/Glossary/CSRF +[cookies]: #cookies +[sessions]: #sessions +[session-storage]: https://api.reactrouter.com/v7/interfaces/react_router.SessionStorage +[session-api]: https://api.reactrouter.com/v7/interfaces/react_router.Session +[is-session]: https://api.reactrouter.com/v7/functions/react_router.isSession +[cookie-api]: https://api.reactrouter.com/v7/interfaces/react_router.Cookie +[create-session-storage]: https://api.reactrouter.com/v7/functions/react_router.createSessionStorage +[create-session]: https://api.reactrouter.com/v7/functions/react_router.createSession +[create-memory-session-storage]: https://api.reactrouter.com/v7/functions/react_router.createMemorySessionStorage +[create-file-session-storage]: https://api.reactrouter.com/v7/functions/_react_router_node.createFileSessionStorage +[create-workers-kv-session-storage]: https://api.reactrouter.com/v7/functions/_react_router_cloudflare.createWorkersKVSessionStorage +[create-arc-table-session-storage]: https://api.reactrouter.com/v7/functions/_react_router_architect.createArcTableSessionStorage +[cookie]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies +[cookie-attrs]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#attributes +[is-cookie]: https://api.reactrouter.com/v7/functions/react_router.isCookie +[create-cookie]: https://api.reactrouter.com/v7/functions/react_router.createCookie From fde17e98aa72a4a324eddb4dcdfe7f6658aa34ca Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Fri, 20 Dec 2024 15:45:17 -0500 Subject: [PATCH 09/11] Update release notes for 6.28.1 --- CHANGELOG.md | 126 +++++++++++++++++++++++++++---------------------- DEVELOPMENT.md | 14 +----- 2 files changed, 71 insertions(+), 69 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cbe2f44418..ade2cdefa2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -37,186 +37,188 @@ We manage release notes in this file instead of the paginated Github Releases Pa - [Minor Changes](#minor-changes) - [Patch Changes](#patch-changes-2) - [Changes by Package](#changes-by-package-2) + - [v6.28.1](#v6281) + - [Patch Changes](#patch-changes-3) - [v6.28.0](#v6280) - [What's Changed](#whats-changed) - [Minor Changes](#minor-changes-1) - - [Patch Changes](#patch-changes-3) + - [Patch Changes](#patch-changes-4) - [v6.27.0](#v6270) - [What's Changed](#whats-changed-1) - [Stabilized APIs](#stabilized-apis) - [Minor Changes](#minor-changes-2) - - [Patch Changes](#patch-changes-4) - - [v6.26.2](#v6262) - [Patch Changes](#patch-changes-5) - - [v6.26.1](#v6261) + - [v6.26.2](#v6262) - [Patch Changes](#patch-changes-6) + - [v6.26.1](#v6261) + - [Patch Changes](#patch-changes-7) - [v6.26.0](#v6260) - [Minor Changes](#minor-changes-3) - - [Patch Changes](#patch-changes-7) - - [v6.25.1](#v6251) - [Patch Changes](#patch-changes-8) + - [v6.25.1](#v6251) + - [Patch Changes](#patch-changes-9) - [v6.25.0](#v6250) - [What's Changed](#whats-changed-2) - [Stabilized `v7_skipActionErrorRevalidation`](#stabilized-v7_skipactionerrorrevalidation) - [Minor Changes](#minor-changes-4) - - [Patch Changes](#patch-changes-9) - - [v6.24.1](#v6241) - [Patch Changes](#patch-changes-10) + - [v6.24.1](#v6241) + - [Patch Changes](#patch-changes-11) - [v6.24.0](#v6240) - [What's Changed](#whats-changed-3) - [Lazy Route Discovery (a.k.a. "Fog of War")](#lazy-route-discovery-aka-fog-of-war) - [Minor Changes](#minor-changes-5) - - [Patch Changes](#patch-changes-11) - - [v6.23.1](#v6231) - [Patch Changes](#patch-changes-12) + - [v6.23.1](#v6231) + - [Patch Changes](#patch-changes-13) - [v6.23.0](#v6230) - [What's Changed](#whats-changed-4) - [Data Strategy (unstable)](#data-strategy-unstable) - [Skip Action Error Revalidation (unstable)](#skip-action-error-revalidation-unstable) - [Minor Changes](#minor-changes-6) - [v6.22.3](#v6223) - - [Patch Changes](#patch-changes-13) - - [v6.22.2](#v6222) - [Patch Changes](#patch-changes-14) - - [v6.22.1](#v6221) + - [v6.22.2](#v6222) - [Patch Changes](#patch-changes-15) + - [v6.22.1](#v6221) + - [Patch Changes](#patch-changes-16) - [v6.22.0](#v6220) - [What's Changed](#whats-changed-5) - [Core Web Vitals Technology Report Flag](#core-web-vitals-technology-report-flag) - [Minor Changes](#minor-changes-7) - - [Patch Changes](#patch-changes-16) - - [v6.21.3](#v6213) - [Patch Changes](#patch-changes-17) - - [v6.21.2](#v6212) + - [v6.21.3](#v6213) - [Patch Changes](#patch-changes-18) - - [v6.21.1](#v6211) + - [v6.21.2](#v6212) - [Patch Changes](#patch-changes-19) + - [v6.21.1](#v6211) + - [Patch Changes](#patch-changes-20) - [v6.21.0](#v6210) - [What's Changed](#whats-changed-6) - [`future.v7_relativeSplatPath`](#futurev7_relativesplatpath) - [Partial Hydration](#partial-hydration) - [Minor Changes](#minor-changes-8) - - [Patch Changes](#patch-changes-20) - - [v6.20.1](#v6201) - [Patch Changes](#patch-changes-21) + - [v6.20.1](#v6201) + - [Patch Changes](#patch-changes-22) - [v6.20.0](#v6200) - [Minor Changes](#minor-changes-9) - - [Patch Changes](#patch-changes-22) + - [Patch Changes](#patch-changes-23) - [v6.19.0](#v6190) - [What's Changed](#whats-changed-7) - [`unstable_flushSync` API](#unstable_flushsync-api) - [Minor Changes](#minor-changes-10) - - [Patch Changes](#patch-changes-23) + - [Patch Changes](#patch-changes-24) - [v6.18.0](#v6180) - [What's Changed](#whats-changed-8) - [New Fetcher APIs](#new-fetcher-apis) - [Persistence Future Flag (`future.v7_fetcherPersist`)](#persistence-future-flag-futurev7_fetcherpersist) - [Minor Changes](#minor-changes-11) - - [Patch Changes](#patch-changes-24) + - [Patch Changes](#patch-changes-25) - [v6.17.0](#v6170) - [What's Changed](#whats-changed-9) - [View Transitions 🚀](#view-transitions-) - [Minor Changes](#minor-changes-12) - - [Patch Changes](#patch-changes-25) + - [Patch Changes](#patch-changes-26) - [v6.16.0](#v6160) - [Minor Changes](#minor-changes-13) - - [Patch Changes](#patch-changes-26) + - [Patch Changes](#patch-changes-27) - [v6.15.0](#v6150) - [Minor Changes](#minor-changes-14) - - [Patch Changes](#patch-changes-27) - - [v6.14.2](#v6142) - [Patch Changes](#patch-changes-28) - - [v6.14.1](#v6141) + - [v6.14.2](#v6142) - [Patch Changes](#patch-changes-29) + - [v6.14.1](#v6141) + - [Patch Changes](#patch-changes-30) - [v6.14.0](#v6140) - [What's Changed](#whats-changed-10) - [JSON/Text Submissions](#jsontext-submissions) - [Minor Changes](#minor-changes-15) - - [Patch Changes](#patch-changes-30) + - [Patch Changes](#patch-changes-31) - [v6.13.0](#v6130) - [What's Changed](#whats-changed-11) - [`future.v7_startTransition`](#futurev7_starttransition) - [Minor Changes](#minor-changes-16) - - [Patch Changes](#patch-changes-31) - - [v6.12.1](#v6121) - [Patch Changes](#patch-changes-32) + - [v6.12.1](#v6121) + - [Patch Changes](#patch-changes-33) - [v6.12.0](#v6120) - [What's Changed](#whats-changed-12) - [`React.startTransition` support](#reactstarttransition-support) - [Minor Changes](#minor-changes-17) - - [Patch Changes](#patch-changes-33) - - [v6.11.2](#v6112) - [Patch Changes](#patch-changes-34) - - [v6.11.1](#v6111) + - [v6.11.2](#v6112) - [Patch Changes](#patch-changes-35) + - [v6.11.1](#v6111) + - [Patch Changes](#patch-changes-36) - [v6.11.0](#v6110) - [Minor Changes](#minor-changes-18) - - [Patch Changes](#patch-changes-36) + - [Patch Changes](#patch-changes-37) - [v6.10.0](#v6100) - [What's Changed](#whats-changed-13) - [Minor Changes](#minor-changes-19) - [`future.v7_normalizeFormMethod`](#futurev7_normalizeformmethod) - - [Patch Changes](#patch-changes-37) + - [Patch Changes](#patch-changes-38) - [v6.9.0](#v690) - [What's Changed](#whats-changed-14) - [`Component`/`ErrorBoundary` route properties](#componenterrorboundary-route-properties) - [Introducing Lazy Route Modules](#introducing-lazy-route-modules) - [Minor Changes](#minor-changes-20) - - [Patch Changes](#patch-changes-38) - - [v6.8.2](#v682) - [Patch Changes](#patch-changes-39) - - [v6.8.1](#v681) + - [v6.8.2](#v682) - [Patch Changes](#patch-changes-40) + - [v6.8.1](#v681) + - [Patch Changes](#patch-changes-41) - [v6.8.0](#v680) - [Minor Changes](#minor-changes-21) - - [Patch Changes](#patch-changes-41) + - [Patch Changes](#patch-changes-42) - [v6.7.0](#v670) - [Minor Changes](#minor-changes-22) - - [Patch Changes](#patch-changes-42) - - [v6.6.2](#v662) - [Patch Changes](#patch-changes-43) - - [v6.6.1](#v661) + - [v6.6.2](#v662) - [Patch Changes](#patch-changes-44) + - [v6.6.1](#v661) + - [Patch Changes](#patch-changes-45) - [v6.6.0](#v660) - [What's Changed](#whats-changed-15) - [Minor Changes](#minor-changes-23) - - [Patch Changes](#patch-changes-45) + - [Patch Changes](#patch-changes-46) - [v6.5.0](#v650) - [What's Changed](#whats-changed-16) - [Minor Changes](#minor-changes-24) - - [Patch Changes](#patch-changes-46) - - [v6.4.5](#v645) - [Patch Changes](#patch-changes-47) - - [v6.4.4](#v644) + - [v6.4.5](#v645) - [Patch Changes](#patch-changes-48) - - [v6.4.3](#v643) + - [v6.4.4](#v644) - [Patch Changes](#patch-changes-49) - - [v6.4.2](#v642) + - [v6.4.3](#v643) - [Patch Changes](#patch-changes-50) - - [v6.4.1](#v641) + - [v6.4.2](#v642) - [Patch Changes](#patch-changes-51) + - [v6.4.1](#v641) + - [Patch Changes](#patch-changes-52) - [v6.4.0](#v640) - [What's Changed](#whats-changed-17) - [Remix Data APIs](#remix-data-apis) - - [Patch Changes](#patch-changes-52) + - [Patch Changes](#patch-changes-53) - [v6.3.0](#v630) - [Minor Changes](#minor-changes-25) - [v6.2.2](#v622) - - [Patch Changes](#patch-changes-53) - - [v6.2.1](#v621) - [Patch Changes](#patch-changes-54) + - [v6.2.1](#v621) + - [Patch Changes](#patch-changes-55) - [v6.2.0](#v620) - [Minor Changes](#minor-changes-26) - - [Patch Changes](#patch-changes-55) - - [v6.1.1](#v611) - [Patch Changes](#patch-changes-56) + - [v6.1.1](#v611) + - [Patch Changes](#patch-changes-57) - [v6.1.0](#v610) - [Minor Changes](#minor-changes-27) - - [Patch Changes](#patch-changes-57) - - [v6.0.2](#v602) - [Patch Changes](#patch-changes-58) - - [v6.0.1](#v601) + - [v6.0.2](#v602) - [Patch Changes](#patch-changes-59) + - [v6.0.1](#v601) + - [Patch Changes](#patch-changes-60) - [v6.0.0](#v600) @@ -718,6 +720,16 @@ async function fakeGetSlugsFromCms() { **Full Changelog**: [`v6.28.0...v7.0.0`](https://github.com/remix-run/react-router/compare/react-router@6.28.0...react-router@7.0.0) +## v6.28.1 + +Date: 2024-12-20 + +### Patch Changes + +- Allow users to opt out of v7 deprecation warnings by setting flags to `false` ([#12441](https://github.com/remix-run/react-router/pull/12441)) + +**Full Changelog**: [`v6.28.0...v6.28.1`](https://github.com/remix-run/react-router/compare/react-router@6.28.0...react-router@6.28.1) + ## v6.28.0 Date: 2024-11-06 diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md index cc737ba1dd..a67543aaaf 100644 --- a/DEVELOPMENT.md +++ b/DEVELOPMENT.md @@ -108,18 +108,8 @@ Hotfix releases follow the same process as standard releases above, but the `rel - Once the stable release is out: - Merge `release-v6` back to `v6` with a **Normal Merge** - **Do not** merge `release-v6` to `main` - - Copy the updated root `CHANGELOG.md` entries for the `6.X.Y` release to `main` and `dev` - - `git checkout main` - - `git diff react-router@6.X.Y...react-router@6.X.Y -- "***CHANGELOG.md" > ./docs.patch` - - `git apply ./docs.patch` - - `git checkout dev` - - `git apply ./docs.patch` - - `rm ./docs.patch` - - Copy the docs changes to `main` so they show up on the live docs site for v6 - - `git checkout main` - - `git diff react-router@6.X.Y...react-router@6.X.Y docs/ > ./docs.patch` - - `git apply ./docs.patch` - - `rm ./docs.patch` + - Manually copy the new root `CHANGELOG.md` entry to `main` and `dev` + - We don't worry about backporting individual `packages/*/CHANGELOG.md` updates to `main` for subsequent v6 releases - The _code_ changes should already be in the `dev` branch - This should have happened at the time the v6 change was made (except for changes such as deprecation warnings) - Confirm that the commits in this release are all included in `dev` already, and if not you can manually bring them over by cherry-picking the commit or re-doing the work From 61f257e141f5959085e0153d1d2f1f6c965d6530 Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Fri, 20 Dec 2024 17:06:17 -0500 Subject: [PATCH 10/11] Fix changelog details/summary --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4ff02c832a..ec4452f895 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -223,6 +223,8 @@ We manage release notes in this file instead of the paginated Github Releases Pa - [Patch Changes](#patch-changes-61) - [v6.0.0](#v600) + +