feat(remix-react, remix-server-runtime): support react-router basename

remix-run · Nov 27, 2023 · d8efd2e · d8efd2e
1 parent 148401b
commit d8efd2e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/packages/remix-react/browser.tsx b/packages/remix-react/browser.tsx
@@ -17,6 +17,7 @@ import {
 declare global {
   var __remixContext: {
     url: string;
+    basename?: string;
     state: HydrationState;
     criticalCss?: string;
     future: FutureConfig;
@@ -185,7 +186,8 @@ export function RemixBrowser(_props: RemixBrowserProps): ReactElement {
     // towards determining the route matches.
     let initialPathname = window.__remixContext.url;
     let hydratedPathname = window.location.pathname;
-    if (initialPathname !== hydratedPathname) {
+    // TODO: consider basename
+    if (0 && initialPathname !== hydratedPathname) {
       let errorMsg =
         `Initial URL (${initialPathname}) does not match URL at time of hydration ` +
         `(${hydratedPathname}), reloading page...`;
@@ -211,6 +213,7 @@ export function RemixBrowser(_props: RemixBrowserProps): ReactElement {
     }
 
     router = createBrowserRouter(routes, {
+      basename: window.__remixContext.basename,
       hydrationData,
       future: {
         v7_normalizeFormMethod: true,
@@ -230,7 +233,7 @@ export function RemixBrowser(_props: RemixBrowserProps): ReactElement {
   // Critical CSS can become stale after code changes, e.g. styles might be
   // removed from a component, but the styles will still be present in the
   // server HTML. This allows our HMR logic to clear the critical CSS state.
-  // eslint-disable-next-line react-hooks/rules-of-hooks
+
   let [criticalCss, clearCriticalCss] = React.useReducer(
     criticalCssReducer,
     window.__remixContext.criticalCss
@@ -239,10 +242,9 @@ export function RemixBrowser(_props: RemixBrowserProps): ReactElement {
 
   // This is due to the shit circuit return above which is an exceptional
   // scenario which we can't hydrate anyway
-  // eslint-disable-next-line react-hooks/rules-of-hooks
+
   let [location, setLocation] = React.useState(router.state.location);
 
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   React.useLayoutEffect(() => {
     return router.subscribe((newState) => {
       if (newState.location !== location) {

diff --git a/packages/remix-server-runtime/server.ts b/packages/remix-server-runtime/server.ts
@@ -44,7 +44,9 @@ function derive(build: ServerBuild, mode?: string) {
   let routes = createRoutes(build.routes);
   let dataRoutes = createStaticHandlerDataRoutes(build.routes, build.future);
   let serverMode = isServerMode(mode) ? mode : ServerMode.Production;
-  let staticHandler = createStaticHandler(dataRoutes);
+  let staticHandler = createStaticHandler(dataRoutes, {
+    basename: build.publicPath,
+  });
 
   let errorHandler =
     build.entry.module.handleError ||
@@ -289,6 +291,7 @@ async function handleDocumentRequestRR(
     criticalCss,
     serverHandoffString: createServerHandoffString({
       url: context.location.pathname,
+      basename: context.basename,
       criticalCss,
       state: {
         loaderData: context.loaderData,

diff --git a/packages/remix-server-runtime/serverHandoff.ts b/packages/remix-server-runtime/serverHandoff.ts
@@ -21,6 +21,7 @@ export function createServerHandoffString<T>(serverHandoff: {
   state: ValidateShape<T, HydrationState>;
   criticalCss?: string;
   url: string;
+  basename?: string;
   future: FutureConfig;
 }): string {
   // Uses faster alternative of jsesc to escape data returned from the loaders.