Merge branch 'main' into release-next

Author: brophdawg11

contributors.yml

@@ -5,6 +5,7 @@
 - AchThomas
 - adamdotjs
 - adil62
+- adriananin
 - adrienharnay
 - afzalsayed96
 - Ajayff4
@@ -71,6 +72,7 @@
 - emzoumpo
 - engpetermwangi
 - ericschn
+- faergeek
 - FilipJirsak
 - frontsideair
 - fyzhu
@@ -108,6 +110,7 @@
 - janpaepke
 - jasikpark
 - jasonpaulos
+- jb-1980
 - jdufresne
 - jenseng
 - JeraldVin

docs/components/link.md

@@ -91,6 +91,27 @@ function EditContact() {
 }
 ```
 
+Please note that `relative: "path"` only impacts the resolution of a relative path. It does not change the the "starting" location for that relative path resolution. This resolution is always relative to the current location in the Route hierarchy (i.e., the route `Link` is rendered in).
+
+If you wish to use path-relative routing against the current URL instead of the route hierarchy, you can do that with the current [`location`][use-location] and the `URL` constructor (note the trailing slash behavior):
+
+```js
+// Assume the current URL is https://remix.run/docs/en/main/start/quickstart
+let location = useLocation();
+
+// Without trailing slashes
+new URL(".", window.origin + location.pathname);
+// 'https://remix.run/docs/en/main/start/'
+new URL("..", window.origin + location.pathname);
+// 'https://remix.run/docs/en/main/'
+
+// With trailing slashes:
+new URL(".", window.origin + location.pathname + "/");
+// 'https://remix.run/docs/en/main/start/future-flags/'
+new URL("..", window.origin + location.pathname + "/");
+// 'https://remix.run/docs/en/main/start/'
+```
+
 ## `preventScrollReset`
 
 If you are using [`<ScrollRestoration>`][scrollrestoration], this lets you prevent the scroll position from being reset to the top of the window when the link is clicked.
@@ -205,3 +226,4 @@ function ImageLink(to) {
 [picking-a-router]: ../routers/picking-a-router
 [navlink]: ./nav-link
 [relativesplatpath]: ../hooks/use-resolved-path#splat-paths
+[use-location]: ../hooks/use-location

docs/guides/ssr.md

@@ -66,7 +66,7 @@ const app = express();
 let handler = createStaticHandler(routes);
 
 app.get("*", async (req, res) => {
-  let fetchRequest = createFetchRequest(req);
+  let fetchRequest = createFetchRequest(req, res);
   let context = await handler.query(fetchRequest);
 
   // We'll tackle rendering next...
@@ -81,13 +81,13 @@ const listener = app.listen(3000, () => {
 Note we have to first convert the incoming Express request into a Fetch request, which is what the static handler methods operate on. The `createFetchRequest` method is specific to an Express request and in this example is extracted from the `@remix-run/express` adapter:
 
 ```js filename=request.js
-module.exports = function createFetchRequest(req) {
+module.exports = function createFetchRequest(req, res) {
   let origin = `${req.protocol}://${req.get("host")}`;
   // Note: This had to take originalUrl into account for presumably vite's proxying
   let url = new URL(req.originalUrl || req.url, origin);
 
   let controller = new AbortController();
-  req.on("close", () => controller.abort());
+  res.on("close", () => controller.abort());
 
   let headers = new Headers();
 
@@ -121,7 +121,7 @@ Once we've loaded our data by executing all of the matched route loaders for the
 
 ```js filename=server.jsx lines=[5-16]
 app.get("*", async (req, res) => {
-  let fetchRequest = createFetchRequest(req);
+  let fetchRequest = createFetchRequest(req, res);
   let context = await handler.query(fetchRequest);
 
   let router = createStaticRouter(
@@ -181,7 +181,7 @@ If any loaders redirect, `handler.query` will return the `Response` directly so
 
 ```js filename=server.jsx lines=[5-10]
 app.get("*", async (req, res) => {
-  let fetchRequest = createFetchRequest(req);
+  let fetchRequest = createFetchRequest(req, res);
   let context = await handler.query(fetchRequest);
 
   if (

docs/hooks/use-navigate.md

@@ -93,6 +93,27 @@ function EditContact() {
 }
 ```
 
+Please note that `relative: "path"` only impacts the resolution of a relative path. It does not change the the "starting" location for that relative path resolution. This resolution is always relative to the current location in the Route hierarchy (i.e., the route `useNavigate` is called in).
+
+If you wish to use path-relative routing against the current URL instead of the route hierarchy, you can do that with the current [`location`][use-location] and the `URL` constructor (note the trailing slash behavior):
+
+```js
+// Assume the current URL is https://remix.run/docs/en/main/start/quickstart
+let location = useLocation();
+
+// Without trailing slashes
+new URL(".", window.origin + location.pathname);
+// 'https://remix.run/docs/en/main/start/'
+new URL("..", window.origin + location.pathname);
+// 'https://remix.run/docs/en/main/'
+
+// With trailing slashes:
+new URL(".", window.origin + location.pathname + "/");
+// 'https://remix.run/docs/en/main/start/future-flags/'
+new URL("..", window.origin + location.pathname + "/");
+// 'https://remix.run/docs/en/main/start/'
+```
+
 ## `options.unstable_flushSync`
 
 The `unstable_flushSync` option tells React Router DOM to wrap the initial state update for this navigation in a [`ReactDOM.flushSync`][flush-sync] call instead of the default [`React.startTransition`][start-transition]. This allows you to perform synchronous DOM actions immediately after the update is flushed to the DOM.

docs/route/loader.md

@@ -47,7 +47,7 @@ createBrowserRouter([
 ]);
 ```
 
-Note that the `:teamId` in the path is parsed as provided as `params.teamId` by the same name.
+Note that the `:teamId` in the path is parsed and provided as `params.teamId` by the same name.
 
 ## `request`
 

docs/start/faq.md

@@ -419,7 +419,7 @@ function User() {
 }
 ```
 
-Instead of rending your component, remix will render the nearest [catch boundary][remix-catchboundary] instead.
+Instead of rendering your component, remix will render the nearest [catch boundary][remix-catchboundary] instead.
 
 [remix]: https://remix.run
 [remix-catchboundary]: https://remix.run/docs/en/v1/api/conventions#catchboundary

examples/ssr-data-router/server.js

@@ -54,7 +54,7 @@ async function createServer() {
       }
 
       try {
-        let appHtml = await render(req);
+        let appHtml = await render(req, res);
         let html = template.replace("<!--app-html-->", appHtml);
         res.setHeader("Content-Type", "text/html");
         return res.status(200).end(html);

examples/ssr-data-router/src/entry.server.tsx

@@ -8,9 +8,12 @@ import {
 } from "react-router-dom/server";
 import { routes } from "./App";
 
-export async function render(request: express.Request) {
+export async function render(
+  request: express.Request,
+  response: express.Response
+) {
   let { query, dataRoutes } = createStaticHandler(routes);
-  let remixRequest = createFetchRequest(request);
+  let remixRequest = createFetchRequest(request, response);
   let context = await query(remixRequest);
 
   if (context instanceof Response) {
@@ -29,13 +32,16 @@ export async function render(request: express.Request) {
   );
 }
 
-export function createFetchRequest(req: express.Request): Request {
+export function createFetchRequest(
+  req: express.Request,
+  res: express.Response
+): Request {
   let origin = `${req.protocol}://${req.get("host")}`;
   // Note: This had to take originalUrl into account for presumably vite's proxying
   let url = new URL(req.originalUrl || req.url, origin);
 
   let controller = new AbortController();
-  req.on("close", () => controller.abort());
+  res.on("close", () => controller.abort());
 
   let headers = new Headers();