react-router-dom-v5-compat@6.4.0-pre.11

Patch Changes

• Updated dependencies
  • react-router@6.4.0-pre.11
  • react-router-dom@6.4.0-pre.11

@remix-run/router@0.2.0-pre.6

Patch Changes

• c3406eb: fix: Rename <Deferred> to <Await> (#9095)

  • We are no longer replacing the Promise on loaderData with the value/error
    when it settles so it's now always a Promise.
  • To that end, we changed from <Deferred value={promise}> to
    <Await resolve={promise}> for clarity, and it also now supports using
    <Await> with raw promises from anywhere, not only those on loaderData
    from a defer() call.
    • Note that raw promises will not be automatically cancelled on interruptions
      so they are not recommended
  • The hooks are now useAsyncValue/useAsyncError

react-router@6.4.0-pre.10

Patch Changes

• feat: Deferred API Updates (#9070)

  • Removes <Suspense> from inside <Deferred>, requires users to render their own suspense boundaries
  • Updates Deferred to use a true error boundary to catch render errors as well as data errors
  • Support array and single promise usages
    • return deferred([ await critical(), lazy() ])
    • return deferred(lazy())
  • Remove Deferrable/ResolvedDeferrable in favor of raw Promise's and Awaited
  • Remove generics from useDeferredData until useLoaderData generic is decided in 6.5

• Updated dependencies

  • @remix-run/router@0.2.0-pre.5

react-router-native@6.4.0-pre.10

Patch Changes

• Updated dependencies
  • react-router@6.4.0-pre.10

react-router-dom@6.4.0-pre.10

Patch Changes

• SSR Updates for React Router (#9058)

  Note: The Data-Router SSR aspects of @remix-run/router and react-router-dom are being released as unstable in this release (unstable_createStaticHandler and unstable_DataStaticRouter), and we plan to finalize them in a subsequent minor release once the kinks can be worked out with the Remix integration. To that end, they are available for use, but are subject to breaking changes in the next minor release.

  • Remove useRenderDataRouter() in favor of <DataRouterProvider>/<DataRouter>
  • Support automatic hydration in <DataStaticRouter>/<DataBrowserRouter>/<DataHashRouter>
    • Uses window.__staticRouterHydrationData
    • Can be disabled on the server via <DataStaticRouter hydrate={false}>
    • Can be disabled (or overridden) in the browser by passing hydrationData to <DataBrowserRouter>/<DataHashRouter>
  • <DataStaticRouter> now tracks it's own SSR error boundaries on StaticHandlerContext
  • StaticHandlerContext now exposes statusCode/loaderHeaders/actionHeaders
  • foundMissingHydrationData check removed since Remix routes may have loaders (for modules) that don't return data for loaderData

• Updated dependencies

  • react-router@6.4.0-pre.10

react-router-dom-v5-compat@6.4.0-pre.10

Patch Changes

• Updated dependencies
  • react-router@6.4.0-pre.10
  • react-router-dom@6.4.0-pre.10

@remix-run/router@0.2.0-pre.5

Patch Changes

• feat: Deferred API Updates (#9070)

  • Support array and single promise usages
    • return deferred([ await critical(), lazy() ])
    • return deferred(lazy())
  • Remove Deferrable/ResolvedDeferrable in favor of raw Promise's and Awaited
  • Remove generics from useDeferredData until useLoaderData generic is decided in 6.5

• feat: Add createStaticRouter for @remix-run/router SSR usage (#9013)

  Notable changes:

  • request is now the driving force inside the router utils, so that we can better handle Request instances coming form the server (as opposed to string and Path instances coming from the client)
  • Removed the signal param from loader and action functions in favor of request.signal

  Example usage (Document Requests):

  // Create a static handler
  let { query } = unstable_createStaticHandler(routes);
  
  // Perform a full-document query for the incoming Fetch Request.  This will
  // execute the appropriate action/loaders and return either the state or a
  // Fetch Response in the case of redirects.
  let state = await query(fetchRequest);
  
  // If we received a Fetch Response back, let our server runtime handle directly
  if (state instanceof Response) {
    throw state;
  }
  
  // Otherwise, render our application providing the data routes and state
  let html = ReactDOMServer.renderToString(
    <React.StrictMode>
      <DataStaticRouter routes={routes} state={state} />
    </React.StrictMode>
  );

  Example usage (Data Requests):

  // Create a static route handler
  let { queryRoute } = unstable_createStaticHandler(routes);
  
  // Perform a single-route query for the incoming Fetch Request.  This will
  // execute the appropriate singular action/loader and return either the raw
  // data or a Fetch Response
  let data = await queryRoute(fetchRequest);
  
  // If we received a Fetch Response back, return it directly
  if (data instanceof Response) {
    return data;
  }
  
  // Otherwise, construct a Response from the raw data (assuming json here)
  return new Response(JSON.stringify(data), {
    headers: {
      "Content-Type": "application/json; charset=utf-8",
    },
  });

• feat: SSR Updates for React Router (#9058)

  Note: The Data-Router SSR aspects of @remix-run/router and react-router-dom are being released as unstable in this release (unstable_createStaticHandler and unstable_DataStaticRouter), and we plan to finalize them in a subsequent minor release once the kinks can be worked out with the Remix integration. To that end, they are available for use, but are subject to breaking changes in the next minor release.

  • Remove useRenderDataRouter() in favor of <DataRouterProvider>/<DataRouter>
  • Support automatic hydration in <DataStaticRouter>/<DataBrowserRouter>/<DataHashRouter>
    • Uses window.__staticRouterHydrationData
    • Can be disabled on the server via <DataStaticRouter hydrate={false}>
    • Can be disabled (or overridden) in the browser by passing hydrationData to <DataBrowserRouter>/<DataHashRouter>
  • <DataStaticRouter> now tracks it's own SSR error boundaries on StaticHandlerContext
  • StaticHandlerContext now exposes statusCode/loaderHeaders/actionHeaders
  • foundMissingHydrationData check removed since Remix routes may have loaders (for modules) that don't return data for loaderData

react-router@6.4.0-pre.9

Patch Changes

• Feat: adds deferred support to data routers (#9002)

  Returning a deferred from a loader allows you to separate critical loader data that you want to wait for prior to rendering the destination page from non-critical data that you are OK to show a spinner for until it loads.

  // In your route loader, return a deferred() and choose per-key whether to
  // await the promise or not.  As soon as the awaited promises resolve, the
  // page will be rendered.
  function loader() {
    return deferred({
      critical: await getCriticalData(),
      lazy: getLazyData(),
    });
  };
  
  // In your route element, grab the values from useLoaderData and render them
  // with <Deferred>
  function DeferredPage() {
    let data = useLoaderData();
    return (
      <>
        <p>Critical Data: {data.critical}</p>
        <Deferred
          value={data.lazy}
          fallback={<p>Loading...</p>}
          errorElement={<RenderDeferredError />}>
          <RenderDeferredData />
        </Deferred>
      </>
    );
  }
  
  // Use separate components to render the data once it resolves, and access it
  // via the useDeferredData hook
  function RenderDeferredData() {
    let data = useDeferredData();
    return <p>Lazy: {data}</p>;
  }
  
  function RenderDeferredError() {
    let data = useRouteError();
    return <p>Error! {data.message} {data.stack}</p>;
  }

  If you want to skip the separate components, you can use the Render Props
  pattern and handle the rendering of the deferred data inline:

  function DeferredPage() {
    let data = useLoaderData();
    return (
      <>
        <p>Critical Data: {data.critical}</p>
        <Deferred value={data.lazy} fallback={<p>Loading...</p>}>
          {(data) => <p>{data}</p>}
        </Deferred>
      </>
    );
  }

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

• fix: Fix trailing slash behavior on pathless routing when using a basename (#9045)

• Updated dependencies

  • @remix-run/router@0.2.0-pre.4

react-router-native@6.4.0-pre.9

Patch Changes

• Updated dependencies
  • react-router@6.4.0-pre.9

react-router-dom@6.4.0-pre.9

Patch Changes

• feat: add basename support for data routers (#9026)
• Updated dependencies
  • react-router@6.4.0-pre.9