feat: add support for basename in data routers (#9026)

* feat: add support for basename in data routers

* add changeset

Author: brophdawg11

.changeset/sixty-otters-teach.md

@@ -0,0 +1,7 @@
+---
+"react-router": patch
+"react-router-dom": patch
+"@remix-run/router": patch
+---
+
+feat: add basename support for data routers

packages/react-router-dom/__tests__/DataBrowserRouter-test.tsx

@@ -77,8 +77,7 @@ function testDomRouter(
        `);
     });
 
-    it("renders the first route that matches the URL when wrapped in a 'basename' Route", () => {
-      // In data routers there is no basename and you should instead use a root route
+    it("renders the first route that matches the URL when wrapped in a root Route", () => {
       let { container } = render(
         <TestDataRouter
           window={getWindow("/my/base/path/thing")}
@@ -101,6 +100,26 @@ function testDomRouter(
        `);
     });
 
+    it("supports a basename prop", () => {
+      let { container } = render(
+        <TestDataRouter
+          basename="/my/base/path"
+          window={getWindow("/my/base/path/thing")}
+          hydrationData={{}}
+        >
+          <Route path="thing" element={<h1>Heyooo</h1>} />
+        </TestDataRouter>
+      );
+
+      expect(getHtml(container)).toMatchInlineSnapshot(`
+        "<div>
+          <h1>
+            Heyooo
+          </h1>
+        </div>"
+      `);
+    });
+
     it("renders with hydration data", async () => {
       let { container } = render(
         <TestDataRouter
@@ -270,6 +289,51 @@ function testDomRouter(
       await waitFor(() => screen.getByText("Foo Heading"));
     });
 
+    it("handles link navigations when using a basename", async () => {
+      let testWindow = getWindow("/base/name/foo");
+      render(
+        <TestDataRouter
+          basename="/base/name"
+          window={testWindow}
+          hydrationData={{}}
+        >
+          <Route path="/" element={<Layout />}>
+            <Route path="foo" element={<h1>Foo Heading</h1>} />
+            <Route path="bar" element={<h1>Bar Heading</h1>} />
+          </Route>
+        </TestDataRouter>
+      );
+
+      function Layout() {
+        return (
+          <div>
+            <Link to="/foo">Link to Foo</Link>
+            <Link to="/bar">Link to Bar</Link>
+            <Outlet />
+          </div>
+        );
+      }
+
+      function assertPathname(pathname) {
+        if (name === "<DataHashRouter>") {
+          expect(testWindow.location.hash).toEqual("#" + pathname);
+        } else {
+          expect(testWindow.location.pathname).toEqual(pathname);
+        }
+      }
+
+      assertPathname("/base/name/foo");
+
+      expect(screen.getByText("Foo Heading")).toBeDefined();
+      fireEvent.click(screen.getByText("Link to Bar"));
+      await waitFor(() => screen.getByText("Bar Heading"));
+      assertPathname("/base/name/bar");
+
+      fireEvent.click(screen.getByText("Link to Foo"));
+      await waitFor(() => screen.getByText("Foo Heading"));
+      assertPathname("/base/name/foo");
+    });
+
     it("executes route loaders on navigation", async () => {
       let barDefer = defer();
 

packages/react-router-dom/index.tsx

@@ -164,6 +164,7 @@ export {
 ////////////////////////////////////////////////////////////////////////////////
 
 export interface DataBrowserRouterProps {
+  basename?: string;
   children?: React.ReactNode;
   hydrationData?: HydrationState;
   fallbackElement?: React.ReactNode;
@@ -172,18 +173,21 @@ export interface DataBrowserRouterProps {
 }
 
 export function DataBrowserRouter({
+  basename,
   children,
   fallbackElement,
   hydrationData,
   routes,
   window,
 }: DataBrowserRouterProps): React.ReactElement {
   return useRenderDataRouter({
+    basename,
     children,
     fallbackElement,
     routes,
     createRouter: (routes) =>
       createBrowserRouter({
+        basename,
         routes,
         hydrationData,
         window,
@@ -192,6 +196,7 @@ export function DataBrowserRouter({
 }
 
 export interface DataHashRouterProps {
+  basename?: string;
   children?: React.ReactNode;
   hydrationData?: HydrationState;
   fallbackElement?: React.ReactNode;
@@ -200,18 +205,21 @@ export interface DataHashRouterProps {
 }
 
 export function DataHashRouter({
+  basename,
   children,
   hydrationData,
   fallbackElement,
   routes,
   window,
 }: DataBrowserRouterProps): React.ReactElement {
   return useRenderDataRouter({
+    basename,
     children,
     fallbackElement,
     routes,
     createRouter: (routes) =>
       createHashRouter({
+        basename,
         routes,
         hydrationData,
         window,

packages/react-router/__tests__/DataMemoryRouter-test.tsx

@@ -86,17 +86,14 @@ describe("<DataMemoryRouter>", () => {
     `);
   });
 
-  it("renders the first route that matches the URL when wrapped in a 'basename' route", () => {
-    // In data routers there is no basename and you should instead use a root route
+  it("renders the first route that matches the URL when wrapped in a root route", () => {
     let { container } = render(
       <DataMemoryRouter
         initialEntries={["/my/base/path/thing"]}
         hydrationData={{}}
       >
         <Route path="/my/base/path">
-          <Route element={<Outlet />}>
-            <Route path="thing" element={<h1>Heyooo</h1>} />
-          </Route>
+          <Route path="thing" element={<h1>Heyooo</h1>} />
         </Route>
       </DataMemoryRouter>
     );
@@ -110,6 +107,26 @@ describe("<DataMemoryRouter>", () => {
     `);
   });
 
+  it("supports a basename prop", () => {
+    let { container } = render(
+      <DataMemoryRouter
+        basename="/my/base/path"
+        initialEntries={["/my/base/path/thing"]}
+        hydrationData={{}}
+      >
+        <Route path="thing" element={<h1>Heyooo</h1>} />
+      </DataMemoryRouter>
+    );
+
+    expect(getHtml(container)).toMatchInlineSnapshot(`
+      "<div>
+        <h1>
+          Heyooo
+        </h1>
+      </div>"
+    `);
+  });
+
   it("renders with hydration data", async () => {
     let { container } = render(
       <DataMemoryRouter

packages/react-router/lib/components.tsx

@@ -56,11 +56,13 @@ export function _resetModuleScope() {
  * @private
  */
 export function useRenderDataRouter({
+  basename,
   children,
   fallbackElement,
   routes,
   createRouter,
 }: {
+  basename?: string;
   children?: React.ReactNode;
   fallbackElement?: React.ReactNode;
   routes?: RouteObject[];
@@ -102,6 +104,7 @@ export function useRenderDataRouter({
     <DataRouterContext.Provider value={router}>
       <DataRouterStateContext.Provider value={state}>
         <Router
+          basename={basename}
           location={state.location}
           navigationType={state.historyAction}
           navigator={navigator}
@@ -114,6 +117,7 @@ export function useRenderDataRouter({
 }
 
 export interface DataMemoryRouterProps {
+  basename?: string;
   children?: React.ReactNode;
   initialEntries?: InitialEntry[];
   initialIndex?: number;
@@ -123,6 +127,7 @@ export interface DataMemoryRouterProps {
 }
 
 export function DataMemoryRouter({
+  basename,
   children,
   initialEntries,
   initialIndex,
@@ -131,11 +136,13 @@ export function DataMemoryRouter({
   routes,
 }: DataMemoryRouterProps): React.ReactElement {
   return useRenderDataRouter({
+    basename,
     children,
     fallbackElement,
     routes,
     createRouter: (routes) =>
       createMemoryRouter({
+        basename,
         initialEntries,
         initialIndex,
         routes,