Merge branch 'dev' into brophdawg11/remove-uses

.changeset/descendant-routes-data-errors.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Fix bug preventing rendering of descendant `<Routes>` when `RouterProvider` errors existed

.changeset/invalid-link-to.md

@@ -0,0 +1,5 @@
+---
+"react-router-dom": patch
+---
+
+Fail gracefully on `<Link to="//">` and other invalid URL values

.changeset/revalidate-error-boundary.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Allow `useRevalidator()` to resolve a loader-driven error boundary scenario

package.json

@@ -108,10 +108,10 @@
       "none": "45.8 kB"
     },
     "packages/react-router/dist/react-router.production.min.js": {
-      "none": "12.7 kB"
+      "none": "12.9 kB"
     },
     "packages/react-router/dist/umd/react-router.production.min.js": {
-      "none": "15.0 kB"
+      "none": "15.3 kB"
     },
     "packages/react-router-dom/dist/react-router-dom.production.min.js": {
       "none": "12 kB"

packages/react-router-dom/__tests__/link-href-test.tsx

@@ -907,4 +907,24 @@ describe("<Link> href", () => {
       );
     });
   });
+
+  test("fails gracefully on invalid `to` values", () => {
+    let warnSpy = jest.spyOn(console, "warn").mockImplementation(() => {});
+    let renderer: TestRenderer.ReactTestRenderer;
+    TestRenderer.act(() => {
+      renderer = TestRenderer.create(
+        <MemoryRouter>
+          <Routes>
+            <Route path="/" element={<Link to="//" />} />
+          </Routes>
+        </MemoryRouter>
+      );
+    });
+
+    expect(renderer.root.findByType("a").props.href).toEqual("//");
+    expect(warnSpy).toHaveBeenCalledWith(
+      '<Link to="//"> contains an invalid URL which will probably break when clicked - please update to a valid URL path.'
+    );
+    warnSpy.mockRestore();
+  });
 });

packages/react-router-dom/dom.ts

@@ -183,11 +183,11 @@ export function getFormSubmissionInfo(
   let payload: unknown = undefined;
 
   if (isFormElement(target)) {
-      // When grabbing the action from the element, it will have had the basename
-      // prefixed to ensure non-JS scenarios work, so strip it since we'll
-      // re-prefix in the router
-      let attr = target.getAttribute("action");
-      action = attr ? stripBasename(attr, basename) : null;
+    // When grabbing the action from the element, it will have had the basename
+    // prefixed to ensure non-JS scenarios work, so strip it since we'll
+    // re-prefix in the router
+    let attr = target.getAttribute("action");
+    action = attr ? stripBasename(attr, basename) : null;
     method = target.getAttribute("method") || defaultMethod;
     encType = target.getAttribute("enctype") || defaultEncType;
 
@@ -207,11 +207,11 @@ export function getFormSubmissionInfo(
 
     // <button>/<input type="submit"> may override attributes of <form>
 
-      // When grabbing the action from the element, it will have had the basename
-      // prefixed to ensure non-JS scenarios work, so strip it since we'll
-      // re-prefix in the router
+    // When grabbing the action from the element, it will have had the basename
+    // prefixed to ensure non-JS scenarios work, so strip it since we'll
+    // re-prefix in the router
     let attr = target.getAttribute("formaction") || form.getAttribute("action");
-      action = attr ? stripBasename(attr, basename) : null;
+    action = attr ? stripBasename(attr, basename) : null;
 
     method =
       target.getAttribute("formmethod") ||

packages/react-router-dom/index.tsx

@@ -451,17 +451,26 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
 
       // Only check for external origins client-side
       if (isBrowser) {
-        let currentUrl = new URL(window.location.href);
-        let targetUrl = to.startsWith("//")
-          ? new URL(currentUrl.protocol + to)
-          : new URL(to);
-        let path = stripBasename(targetUrl.pathname, basename);
-
-        if (targetUrl.origin === currentUrl.origin && path != null) {
-          // Strip the protocol/origin/basename for same-origin absolute URLs
-          to = path + targetUrl.search + targetUrl.hash;
-        } else {
-          isExternal = true;
+        try {
+          let currentUrl = new URL(window.location.href);
+          let targetUrl = to.startsWith("//")
+            ? new URL(currentUrl.protocol + to)
+            : new URL(to);
+          let path = stripBasename(targetUrl.pathname, basename);
+
+          if (targetUrl.origin === currentUrl.origin && path != null) {
+            // Strip the protocol/origin/basename for same-origin absolute URLs
+            to = path + targetUrl.search + targetUrl.hash;
+          } else {
+            isExternal = true;
+          }
+        } catch (e) {
+          // We can't do external URL detection without a valid URL
+          warning(
+            false,
+            `<Link to="${to}"> contains an invalid URL which will probably break ` +
+              `when clicked - please update to a valid URL path.`
+          );
         }
       }
     }

packages/react-router-dom/server.tsx

@@ -18,12 +18,17 @@ import {
   UNSAFE_convertRoutesToDataRoutes as convertRoutesToDataRoutes,
 } from "@remix-run/router";
 import { UNSAFE_mapRouteProperties as mapRouteProperties } from "react-router";
-import type { Location, RouteObject, To } from "react-router-dom";
-import { Routes } from "react-router-dom";
+import type {
+  DataRouteObject,
+  Location,
+  RouteObject,
+  To,
+} from "react-router-dom";
 import {
   createPath,
   parsePath,
   Router,
+  useRoutes,
   UNSAFE_DataRouterContext as DataRouterContext,
   UNSAFE_DataRouterStateContext as DataRouterStateContext,
 } from "react-router-dom";
@@ -127,7 +132,7 @@ export function StaticRouterProvider({
             navigationType={dataRouterContext.router.state.historyAction}
             navigator={dataRouterContext.navigator}
           >
-            <Routes />
+            <DataRoutes routes={router.routes} />
           </Router>
         </DataRouterStateContext.Provider>
       </DataRouterContext.Provider>
@@ -142,6 +147,14 @@ export function StaticRouterProvider({
   );
 }
 
+function DataRoutes({
+  routes,
+}: {
+  routes: DataRouteObject[];
+}): React.ReactElement | null {
+  return useRoutes(routes);
+}
+
 function serializeErrors(
   errors: StaticHandlerContext["errors"]
 ): StaticHandlerContext["errors"] {