API Follow Ups (#9059)

* Treat non-false shouldRevalidate as truthy

* change return type of useRouteError to unknown

* rename Deferred fallback prop to fallbackElement

* fix: add reloadDocument to <Form>

* Fallback on defaultShouldRevalidate for non-boolean return

* Change hook return types from any to unknown

Author: brophdawg11

.changeset/light-months-argue.md

@@ -27,7 +27,7 @@ function DeferredPage() {
       <p>Critical Data: {data.critical}</p>
       <Deferred
         value={data.lazy}
-        fallback={<p>Loading...</p>}
+        fallbackElement={<p>Loading...</p>}
         errorElement={<RenderDeferredError />}>
         <RenderDeferredData />
       </Deferred>
@@ -57,7 +57,7 @@ function DeferredPage() {
   return (
     <>
       <p>Critical Data: {data.critical}</p>
-      <Deferred value={data.lazy} fallback={<p>Loading...</p>}>
+      <Deferred value={data.lazy} fallbackElement={<p>Loading...</p>}>
         {(data) => <p>{data}</p>}
       </Deferred>
     </>

examples/data-router/src/App.tsx

@@ -270,21 +270,24 @@ function DeferredPage() {
     <div>
       <p>{data.critical1}</p>
       <p>{data.critical2}</p>
-      <Deferred value={data.lazyResolved} fallback={<p>should not see me!</p>}>
+      <Deferred
+        value={data.lazyResolved}
+        fallbackElement={<p>should not see me!</p>}
+      >
         <RenderDeferredData />
       </Deferred>
-      <Deferred value={data.lazy1} fallback={<p>loading 1...</p>}>
+      <Deferred value={data.lazy1} fallbackElement={<p>loading 1...</p>}>
         <RenderDeferredData />
       </Deferred>
-      <Deferred value={data.lazy2} fallback={<p>loading 2...</p>}>
+      <Deferred value={data.lazy2} fallbackElement={<p>loading 2...</p>}>
         <RenderDeferredData />
       </Deferred>
-      <Deferred value={data.lazy3} fallback={<p>loading 3...</p>}>
+      <Deferred value={data.lazy3} fallbackElement={<p>loading 3...</p>}>
         {(data) => <p>{data}</p>}
       </Deferred>
       <Deferred
         value={data.lazyError}
-        fallback={<p>loading (error)...</p>}
+        fallbackElement={<p>loading (error)...</p>}
         errorElement={<RenderDeferredError />}
       >
         <RenderDeferredData />
@@ -311,7 +314,7 @@ function DeferredChild() {
   return (
     <div>
       <p>{data.critical}</p>
-      <Deferred value={data.lazy} fallback={<p>loading child...</p>}>
+      <Deferred value={data.lazy} fallbackElement={<p>loading child...</p>}>
         <RenderDeferredData />
       </Deferred>
       <Form method="post">

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

@@ -769,6 +769,39 @@ function testDomRouter(
       `);
     });
 
+    it("supports <Form reloadDocument={true}>", async () => {
+      let actionSpy = jest.fn();
+      render(
+        <TestDataRouter window={getWindow("/")} hydrationData={{}}>
+          <Route path="/" action={actionSpy} element={<Home />} />
+        </TestDataRouter>
+      );
+
+      let handlerCalled;
+      let defaultPrevented;
+
+      function Home() {
+        return (
+          <Form
+            method="post"
+            reloadDocument={true}
+            onSubmit={(e) => {
+              handlerCalled = true;
+              defaultPrevented = e.defaultPrevented;
+            }}
+          >
+            <input name="test" value="value" />
+            <button type="submit">Submit Form</button>
+          </Form>
+        );
+      }
+
+      fireEvent.click(screen.getByText("Submit Form"));
+      expect(handlerCalled).toBe(true);
+      expect(defaultPrevented).toBe(false);
+      expect(actionSpy).not.toHaveBeenCalled();
+    });
+
     it('defaults <Form method="get"> to be a PUSH navigation', async () => {
       let { container } = render(
         <TestDataRouter window={getWindow("/")} hydrationData={{}}>

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

@@ -97,6 +97,48 @@ describe("A <Link> click", () => {
 
       expect(event.defaultPrevented).toBe(false);
     });
+
+    it("calls provided listener", () => {
+      let handlerCalled;
+      let defaultPrevented;
+
+      function Home() {
+        return (
+          <div>
+            <h1>Home</h1>
+            <Link
+              reloadDocument
+              to="../about"
+              onClick={(e) => {
+                handlerCalled = true;
+                defaultPrevented = e.defaultPrevented;
+              }}
+            >
+              About
+            </Link>
+          </div>
+        );
+      }
+
+      act(() => {
+        ReactDOM.render(
+          <MemoryRouter initialEntries={["/home"]}>
+            <Routes>
+              <Route path="home" element={<Home />} />
+              <Route path="about" element={<h1>About</h1>} />
+            </Routes>
+          </MemoryRouter>,
+          node
+        );
+      });
+
+      act(() => {
+        click(node.querySelector("a"));
+      });
+
+      expect(handlerCalled).toBe(true);
+      expect(defaultPrevented).toBe(false);
+    });
   });
 
   describe("when preventDefault is used on the click handler", () => {

packages/react-router-dom/index.tsx

@@ -380,7 +380,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
       event: React.MouseEvent<HTMLAnchorElement, MouseEvent>
     ) {
       if (onClick) onClick(event);
-      if (!event.defaultPrevented && !reloadDocument) {
+      if (!event.defaultPrevented) {
         internalOnClick(event);
       }
     }
@@ -390,7 +390,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
       <a
         {...rest}
         href={href}
-        onClick={handleClick}
+        onClick={reloadDocument ? onClick : handleClick}
         ref={ref}
         target={target}
       />
@@ -518,6 +518,11 @@ export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
    */
   action?: string;
 
+  /**
+   * Forces a full document navigation instead of a fetch.
+   */
+  reloadDocument?: boolean;
+
   /**
    * Replaces the current entry in the browser history stack when the form
    * navigates. Use this if you don't want the user to be able to click "back"
@@ -564,6 +569,7 @@ interface FormImplProps extends FormProps {
 const FormImpl = React.forwardRef<HTMLFormElement, FormImplProps>(
   (
     {
+      reloadDocument,
       replace,
       method = defaultMethod,
       action = ".",
@@ -594,7 +600,7 @@ const FormImpl = React.forwardRef<HTMLFormElement, FormImplProps>(
         ref={forwardedRef}
         method={formMethod}
         action={formAction}
-        onSubmit={submitHandler}
+        onSubmit={reloadDocument ? onSubmit : submitHandler}
         {...props}
       />
     );

packages/react-router/CHANGELOG.md

@@ -28,7 +28,7 @@
         <p>Critical Data: {data.critical}</p>
         <Deferred
           value={data.lazy}
-          fallback={<p>Loading...</p>}
+          fallbackElement={<p>Loading...</p>}
           errorElement={<RenderDeferredError />}>
           <RenderDeferredData />
         </Deferred>
@@ -58,7 +58,7 @@
     return (
       <>
         <p>Critical Data: {data.critical}</p>
-        <Deferred value={data.lazy} fallback={<p>Loading...</p>}>
+        <Deferred value={data.lazy} fallbackElement={<p>Loading...</p>}>
           {(data) => <p>{data}</p>}
         </Deferred>
       </>

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

@@ -1924,7 +1924,7 @@ describe("<DataMemoryRouter>", () => {
         return (
           <>
             <p>{data.critical}</p>
-            <Deferred value={data.lazy} fallback={<p>Loading...</p>}>
+            <Deferred value={data.lazy} fallbackElement={<p>Loading...</p>}>
               <LazyData />
             </Deferred>
           </>
@@ -2041,7 +2041,10 @@ describe("<DataMemoryRouter>", () => {
         return (
           <>
             <p>{data.critical}</p>
-            <Deferred<string> value={data.lazy} fallback={<p>Loading...</p>}>
+            <Deferred<string>
+              value={data.lazy}
+              fallbackElement={<p>Loading...</p>}
+            >
               {(data) => <p>{data}</p>}
             </Deferred>
           </>
@@ -2156,7 +2159,7 @@ describe("<DataMemoryRouter>", () => {
             <p>{data.critical}</p>
             <Deferred
               value={data.lazy}
-              fallback={<p>Loading...</p>}
+              fallbackElement={<p>Loading...</p>}
               errorElement={<LazyError />}
             >
               <LazyData />
@@ -2281,7 +2284,7 @@ describe("<DataMemoryRouter>", () => {
         return (
           <>
             <p>{data.critical}</p>
-            <Deferred value={data.lazy} fallback={<p>Loading...</p>}>
+            <Deferred value={data.lazy} fallbackElement={<p>Loading...</p>}>
               <LazyData />
             </Deferred>
           </>

packages/react-router/lib/components.tsx

@@ -434,10 +434,10 @@ export interface DeferredResolveRenderFunction<Data> {
   (data: ResolvedDeferrable<Data>): JSX.Element;
 }
 
-export interface DeferredProps<Data>
-  extends Omit<React.SuspenseProps, "children"> {
+export interface DeferredProps<Data> {
   children: React.ReactNode | DeferredResolveRenderFunction<Data>;
   value: Data;
+  fallbackElement: React.SuspenseProps["fallback"];
   errorElement?: React.ReactNode;
 }
 
@@ -448,12 +448,12 @@ export interface DeferredProps<Data>
 export function Deferred<Data = any>({
   children,
   value,
-  fallback,
+  fallbackElement,
   errorElement,
 }: DeferredProps<Data>) {
   return (
     <DeferredContext.Provider value={value}>
-      <React.Suspense fallback={fallback}>
+      <React.Suspense fallback={fallbackElement}>
         <DeferredWrapper errorElement={errorElement}>
           {typeof children === "function" ? (
             <ResolveDeferred

packages/react-router/lib/hooks.tsx

@@ -428,15 +428,18 @@ function DefaultErrorElement() {
   let error = useRouteError();
   let message = isRouteErrorResponse(error)
     ? `${error.status} ${error.statusText}`
-    : error?.message || JSON.stringify(error);
+    : error instanceof Error
+    ? error.message
+    : JSON.stringify(error);
+  let stack = error instanceof Error ? error.stack : null;
   let lightgrey = "rgba(200,200,200, 0.5)";
   let preStyles = { padding: "0.5rem", backgroundColor: lightgrey };
   let codeStyles = { padding: "2px 4px", backgroundColor: lightgrey };
   return (
     <>
       <h2>Unhandled Thrown Error!</h2>
       <h3 style={{ fontStyle: "italic" }}>{message}</h3>
-      {error?.stack ? <pre style={preStyles}>{error?.stack}</pre> : null}
+      {stack ? <pre style={preStyles}>{stack}</pre> : null}
       <p>💿 Hey developer 👋</p>
       <p>
         You can provide a way better UX than this when your app throws errors by
@@ -645,8 +648,8 @@ export function useMatches() {
           id: match.route.id,
           pathname,
           params,
-          data: loaderData[match.route.id],
-          handle: match.route.handle,
+          data: loaderData[match.route.id] as unknown,
+          handle: match.route.handle as unknown,
         };
       }),
     [matches, loaderData]
@@ -656,7 +659,7 @@ export function useMatches() {
 /**
  * Returns the loader data for the nearest ancestor Route loader
  */
-export function useLoaderData() {
+export function useLoaderData(): unknown {
   let state = useDataRouterState(DataRouterHook.UseLoaderData);
 
   let route = React.useContext(RouteContext);
@@ -674,15 +677,15 @@ export function useLoaderData() {
 /**
  * Returns the loaderData for the given routeId
  */
-export function useRouteLoaderData(routeId: string): any | undefined {
+export function useRouteLoaderData(routeId: string): unknown {
   let state = useDataRouterState(DataRouterHook.UseRouteLoaderData);
   return state.loaderData[routeId];
 }
 
 /**
  * Returns the action data for the nearest ancestor Route action
  */
-export function useActionData() {
+export function useActionData(): unknown {
   let state = useDataRouterState(DataRouterHook.UseActionData);
 
   let route = React.useContext(RouteContext);
@@ -696,7 +699,7 @@ export function useActionData() {
  * error or a render error.  This is intended to be called from your
  * errorElement to display a proper error message.
  */
-export function useRouteError() {
+export function useRouteError(): unknown {
   let error = React.useContext(RouteErrorContext);
   let state = useDataRouterState(DataRouterHook.UseRouteError);
   let route = React.useContext(RouteContext);