remix-run · yracnet · Oct 31, 2022 · Oct 31, 2022 · Oct 31, 2022 · Jan 19, 2023
diff --git a/contributors.yml b/contributors.yml
@@ -470,6 +470,7 @@
 - yomeshgupta
 - youbicode
 - youngvform
+- yracnet
 - zachdtaylor
 - zainfathoni
 - zhe

diff --git a/docs/components/form.md b/docs/components/form.md
@@ -6,6 +6,8 @@ title: Form
 
 <docs-success>Watch the <a href="https://www.youtube.com/playlist?list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6">📼 Remix Singles</a>: <a href="https://www.youtube.com/watch?v=Iv25HAHaFDs&list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6">Data Mutations with Form + action</a>, <a href="https://www.youtube.com/watch?v=w2i-9cYxSdc&list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6">Multiple Forms and Single Button Mutations</a> and <a href="https://www.youtube.com/watch?v=bMLej7bg5Zo&list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6">Clearing Inputs After Form Submissions</a></docs-success>
 
+<docs-info>This component is simply a re-export of [React Router's `Form`][rr-form].</docs-info>
+
 The `<Form>` component is a declarative way to perform data mutations: creating, updating, and deleting data. While it might be a mind-shift to think about these tasks as "navigation", it's how the web has handled mutations since before JavaScript was created!
 
 ```tsx
@@ -92,6 +94,8 @@ When the `action` prop is omitted, `<Form>` and `<form>` will sometimes call dif
 - `<form>` uses the current URL as the default which can lead to surprising results: forms inside parent routes will post to the child action if you're at the child's URL and the parents action when you're at the parent's URL. This means as the user navigates, the form's behavior changes.
 - `<Form>` will always post to the route's action, independent of the URL. A form in a parent route will always post to the parent, even if you're at the child's URL.
 
+For more information and usage, please refer to the [React Router `Form` docs][rr-form].
+
 See also:
 
 - [`useTransition`][usetransition]
@@ -103,3 +107,4 @@ See also:
 [useactiondata]: ../hooks/use-action-data
 [usesubmit]: ../hooks/use-submit
 [http-verb]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods
+[rr-form]: https://reactrouter.com/components/form
diff --git a/docs/components/outlet.md b/docs/components/outlet.md
@@ -4,6 +4,6 @@ title: Outlet
 
 # `<Outlet>`
 
-Re-export of [React Router Outlet][rr-outlet].
+This <docs-info> is simply a re-export of [React Router's `Outlet`][rr-outlet].</docs-info>
 
 [rr-outlet]: https://reactrouter.com/components/outlet
diff --git a/docs/hooks/use-async-error.md b/docs/hooks/use-async-error.md
@@ -0,0 +1,10 @@
+---
+title: useAsyncError
+toc: false
+---
+
+# `useAsyncError`
+
+<docs-info>This hook is simply a re-export of [React Router's `useAsyncError`][rr-useassyncerror].</docs-info>
+
+[rr-useassyncerror]: https://reactrouter.com/hooks/use-async-error
diff --git a/docs/hooks/use-async-value.md b/docs/hooks/use-async-value.md
@@ -0,0 +1,10 @@
+---
+title: useAsyncValue
+toc: false
+---
+
+# `useAsyncValue`
+
+<docs-info>This hook is simply a re-export of [React Router's `useAsyncValue`][rr-useassyncvalue].</docs-info>
+
+[rr-useassyncvalue]: https://reactrouter.com/hooks/use-async-value
diff --git a/docs/hooks/use-before-unload.md b/docs/hooks/use-before-unload.md
@@ -1,9 +1,12 @@
 ---
 title: useBeforeUnload
+toc: false
 ---
 
 # `useBeforeUnload`
 
+<docs-info>This hook is simply a re-export of [React Router's `useBeforeUnload`][rr-usebeforeunload].</docs-info>
+
 This hook is just a helper around `window.onbeforeunload`.
 
 When users click links to pages they haven't visited yet, Remix loads the code-split modules for that page. If you deploy in the middle of a user's session, and you or your host removes the old files from the server (many do 😭), then Remix's requests for those modules will fail. Remix recovers by automatically reloading the browser at the new URL. This should start over from the server with the latest version of your application. Most of the time this works out great, and user doesn't even know anything happened.
@@ -35,3 +38,7 @@ function SomeForm() {
   return <>{/*... */}</>;
 }
 ```
+
+For more information and usage, please refer to the [React Router `useBeforeUnload` docs][rr-usebeforeunload].
+
+[rr-usebeforeunload]: https://reactrouter.com/hooks/use-before-unload
diff --git a/docs/hooks/use-fetcher.md b/docs/hooks/use-fetcher.md
@@ -1,5 +1,6 @@
 ---
 title: useFetcher
+toc: false
 ---
 
 # `useFetcher`

diff --git a/docs/hooks/use-form-action.md b/docs/hooks/use-form-action.md
@@ -4,6 +4,8 @@ title: useFormAction
 
 # `useFormAction`
 
+<docs-info>This hook is simply a re-export of [React Router's `useFormAction`][rr-useformaction].</docs-info>
+
 Resolves the value of a `<form action>` attribute using React Router's relative paths. This can be useful when computing the correct action for a `<button formAction>`, for example, when a `<button>` changes the action of its `<form>`.
 
 ```tsx
@@ -20,3 +22,7 @@ function SomeComponent() {
 ```
 
 (Yes, HTML buttons can change the action of their form!)
+
+For more information and usage, please refer to the [React Router `useFormAction` docs][rr-useformaction].
+
+[rr-useformaction]: https://reactrouter.com/hooks/use-form-action
diff --git a/docs/hooks/use-href.md b/docs/hooks/use-href.md
@@ -0,0 +1,10 @@
+---
+title: useHref
+toc: false
+---
+
+# `useHref`
+
+<docs-info>This hook is simply a re-export of [React Router's `useHref`][rr-usehref].</docs-info>
+
+[rr-usehref]: https://reactrouter.com/hooks/use-href
diff --git a/docs/hooks/use-location.md b/docs/hooks/use-location.md
@@ -0,0 +1,10 @@
+---
+title: useLocation
+toc: false
+---
+
+# `useLocation`
+
+<docs-info>This hook is simply a re-export of [React Router's `useLocation`][rr-uselocation].</docs-info>
+
+[rr-uselocation]: https://reactrouter.com/hooks/use-location
diff --git a/docs/hooks/use-navigate.md b/docs/hooks/use-navigate.md
@@ -0,0 +1,10 @@
+---
+title: useNavigate
+toc: false
+---
+
+# `useNavigate`
+
+<docs-info>This hook is simply a re-export of [React Router's `useNavigate`][rr-usenavigate].</docs-info>
+
+[rr-usenavigate]: https://reactrouter.com/hooks/use-navigate
diff --git a/docs/hooks/use-navigation-type.md b/docs/hooks/use-navigation-type.md
@@ -0,0 +1,10 @@
+---
+title: useNavigationType
+toc: false
+---
+
+# `useNavigationType`
+
+<docs-info>This hook is simply a re-export of [React Router's `useNavigationType`][rr-usenavigationtype].</docs-info>
+
+[rr-usenavigationtype]: https://reactrouter.com/hooks/use-navigation-type
diff --git a/docs/hooks/use-navigation.md b/docs/hooks/use-navigation.md
@@ -5,7 +5,7 @@ toc: false
 
 # `useNavigation`
 
-This hook is simply a re-export of [React Router `useNavigation`][rr-usenavigation].
+<docs-info>This hook is simply a re-export of [React Router `useNavigation`][rr-usenavigation].</docs-info>
 
 ```tsx
 import { useNavigation } from "@remix-run/react";
@@ -20,6 +20,6 @@ function SomeComponent() {
 }
 ```
 
-For information and usage, please refer to the [React Router `useNavigation` docs][rr-usenavigation].
+For more information and usage, please refer to the [React Router `useNavigation` docs][rr-usenavigation].
 
-[rr-usenavigation]: https://reactrouter.com/en/main/hooks/use-navigation
+[rr-usenavigation]: https://reactrouter.com/hooks/use-navigation
diff --git a/docs/hooks/use-outlet-context.md b/docs/hooks/use-outlet-context.md
@@ -0,0 +1,10 @@
+---
+title: useOutletContext
+toc: false
+---
+
+# `useOutletContext`
+
+<docs-info>This hook is simply a re-export of [React Router's `useOutletContext`][rr-useoutletcontext].</docs-info>
+
+[rr-useoutletcontext]: https://reactrouter.com/hooks/use-outlet-context
diff --git a/docs/hooks/use-outlet.md b/docs/hooks/use-outlet.md
@@ -0,0 +1,10 @@
+---
+title: useOutlet
+toc: false
+---
+
+# `useOutlet`
+
+<docs-info>This hook is simply a re-export of [React Router's `useOutlet`][rr-useoutlet].</docs-info>
+
+[rr-useoutlet]: https://reactrouter.com/hooks/use-outlet
diff --git a/docs/hooks/use-params.md b/docs/hooks/use-params.md
@@ -0,0 +1,10 @@
+---
+title: useParams
+toc: false
+---
+
+# `useParams`
+
+<docs-info>This hook is simply a re-export of [React Router's `useParams`][rr-useparams].</docs-info>
+
+[rr-useparams]: https://reactrouter.com/hooks/use-params
diff --git a/docs/hooks/use-resolved-path.md b/docs/hooks/use-resolved-path.md
@@ -0,0 +1,10 @@
+---
+title: useResolvedPath
+toc: false
+---
+
+# `useResolvedPath`
+
+<docs-info>This hook is simply a re-export of [React Router's `useResolvedPath`][rr-useresolvedpath].</docs-info>
+
+[rr-useresolvedpath]: https://reactrouter.com/hooks/use-resolved-path
diff --git a/docs/hooks/use-revalidator.md b/docs/hooks/use-revalidator.md
@@ -4,6 +4,8 @@ title: useRevalidator
 
 # `useRevalidator`
 
+<docs-info>This hook is simply a re-export of [React Router's `useRevalidator`][rr-userevalidator].</docs-info>
+
 This hook allows you to revalidate the data for any reason. React Router automatically revalidates the data after actions are called, but you may want to revalidate for other reasons like when focus returns to the window.
 
 ```jsx
@@ -24,6 +26,6 @@ function WindowFocusRevalidator() {
 }
 ```
 
-For more information see the [React Router `useRevalidator` docs][rr-userevalidator]
+For more information and usage, please refer to the [React Router `useRevalidator` docs][rr-userevalidator].
 
-[rr-userevalidator]: https://reactrouter.com/en/main/hooks/use-revalidator
+[rr-userevalidator]: https://reactrouter.com/hooks/use-revalidator
diff --git a/docs/hooks/use-route-error.md b/docs/hooks/use-route-error.md
@@ -0,0 +1,10 @@
+---
+title: useRouteError
+toc: false
+---
+
+# `useRouteError`
+
+<docs-info>This hook is simply a re-export of [React Router's `useRouteError`][rr-userouteerror].</docs-info>
+
+[rr-userouteerror]: https://reactrouter.com/hooks/use-route-error
diff --git a/docs/hooks/use-route-loader-data.md b/docs/hooks/use-route-loader-data.md
@@ -5,7 +5,9 @@ toc: false
 
 # `useRouteLoaderData`
 
-This hook is simply a re-export of [React Router `useRouteLoaderData`][userouteloaderdata]. Pass in a route ID and it will return the loader data for that route.
+<docs-info>This hook is simply a re-export of [React Router `useRouteLoaderData`][rr-userouteloaderdata].</docs-info>
+
+Pass in a route ID and it will return the loader data for that route.
 
 ```tsx
 import { useRouteLoaderData } from "@remix-run/react";
@@ -23,6 +25,6 @@ Remix creates the route IDs automatically. They are simply the path of the route
 | `app/routes/teams.tsx`     | `"routes/teams"`     |
 | `app/routes/teams.$id.jsx` | `"routes/teams.$id"` |
 
-For more information and usage, please refer to the [React Router `useRouteLoaderData` docs][userouteloaderdata].
+For more information and usage, please refer to the [React Router `useRouteLoaderData` docs][rr-userouteloaderdata].
 
-[userouteloaderdata]: https://reactrouter.com/en/main/hooks/use-route-loader-data
+[rr-userouteloaderdata]: https://reactrouter.com/hooks/use-route-loader-data
diff --git a/docs/hooks/use-search-params.md b/docs/hooks/use-search-params.md
@@ -0,0 +1,10 @@
+---
+title: useSearchParams
+toc: false
+---
+
+# `useSearchParams`
+
+<docs-info>This hook is simply a re-export of [React Router's `useSearchParams`][rr-usesearchparams].</docs-info>
+
+[rr-usesearchparams]: https://reactrouter.com/hooks/use-search-params
diff --git a/docs/hooks/use-submit.md b/docs/hooks/use-submit.md
@@ -4,6 +4,8 @@ title: useSubmit
 
 # `useSubmit`
 
+<docs-info>This hook is simply a re-export of [React Router's `useSubmit`][rr-usesubmit].</docs-info>
+
 Returns the function that may be used to submit a `<form>` (or some raw `FormData`) to the server using the same process that `<Form>` uses internally `onSubmit`. If you're familiar with React Router's `useNavigate`, you can think about this as the same thing but for `<Form>` instead of `<Link>`.
 
 This is useful whenever you need to programmatically submit a form. For example, you may wish to save a user preferences form whenever any field changes.
@@ -68,3 +70,7 @@ function useSessionTimeout() {
   }, [submit, transition]);
 }
 ```
+
+For more information and usage, please refer to the [React Router `useSubmit` docs][rr-usesubmit].
+
+[rr-usesubmit]: https://reactrouter.com/hooks/use-submit
diff --git a/packages/remix-dev/__tests__/readConfig-test.ts b/packages/remix-dev/__tests__/readConfig-test.ts
@@ -60,6 +60,7 @@ describe("readConfig", () => {
             "path": "",
           },
         },
+        "serverBasename": "",
         "serverBuildPath": Any<String>,
         "serverBuildTarget": undefined,
         "serverBuildTargetEntryModule": "export * from \\"@remix-run/dev/server-build\\";",

diff --git a/packages/remix-dev/config.ts b/packages/remix-dev/config.ts
@@ -91,6 +91,14 @@ export interface AppConfig {
    */
   serverBuildPath?: string;
 
+  /**
+   * Server Basename is a location path for app deploy on server.
+   *
+   * If omitted, the default location path is / (root directory)
+   * {@link ServerConfig.serverBasename}.
+   */
+  serverBasename?: string;
+
   /**
    * The path to the browser build, relative to `remix.config.js`. Defaults to
    * "public/build".
@@ -219,6 +227,14 @@ export interface RemixConfig {
    */
   serverBuildPath: string;
 
+  /**
+   * Server Basename is a location path for app deploy on server.
+   *
+   * If omitted, the default location path is / (root directory)
+   * {@link ServerConfig.serverBasename}.
+   */
+  serverBasename?: string;
+
   /**
    * The absolute path to the assets build directory.
    */
@@ -340,6 +356,7 @@ export async function readConfig(
     }
   }
 
+  let serverBasename = appConfig.serverBasename || "";
   let customServerEntryPoint = appConfig.server;
   let serverBuildTarget: ServerBuildTarget | undefined =
     appConfig.serverBuildTarget;
@@ -438,7 +455,11 @@ export async function readConfig(
   }
 
   let routes: RouteManifest = {
-    root: { path: "", id: "root", file: rootRouteFile },
+    root: {
+      path: serverBasename,
+      id: "root",
+      file: rootRouteFile,
+    },
   };
 
   let routesConvention = appConfig.future?.v2_routeConvention
@@ -519,7 +540,8 @@ export async function readConfig(
     devServerBroadcastDelay,
     assetsBuildDirectory: absoluteAssetsBuildDirectory,
     relativeAssetsBuildDirectory: assetsBuildDirectory,
-    publicPath,
+    serverBasename,
+    publicPath: path.join(serverBasename, publicPath).replace(/\\/g, "/"),
     rootDirectory,
     routes,
     serverBuildPath,

diff --git a/packages/remix-dev/devServer/serve.ts b/packages/remix-dev/devServer/serve.ts
@@ -60,9 +60,12 @@ export async function serve(
   app.use(
     createApp(
       config.serverBuildPath,
-      mode,
-      config.publicPath,
-      config.assetsBuildDirectory
+      {
+        mode,
+        basename: config.serverBasename,
+        publicPath: config.publicPath,
+        assetsBuildDirectory: config.assetsBuildDirectory
+      }
     )
   );
 

diff --git a/packages/remix-express/server.ts b/packages/remix-express/server.ts
@@ -94,7 +94,7 @@ export function createRemixRequest(
   res: express.Response
 ): NodeRequest {
   let origin = `${req.protocol}://${req.get("host")}`;
-  let url = new URL(req.url, origin);
+  let url = new URL(req.originalUrl, origin);
 
   // Abort action/loaders once we can no longer write a response
   let controller = new NodeAbortController();