v6.22.0

See the changelog for release notes: https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v6220

v6.21.3

See the changelog for release notes: https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v6213

v6.21.2

See the changelog for release notes: https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v6212

v6.21.1

See the changelog for release notes: https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v6211

v6.21.0

See the changelog for release notes: https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v6210

v6.20.1

See the changelog for release notes: https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v6201

v6.20.0

See the changelog for release notes: https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v6200

v6.19.0

See the changelog for release notes: https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v6190

v6.18.0

Minor Changes

New Fetcher APIs

Per this RFC, we've introduced some new APIs that give you more granular control over your fetcher behaviors. (#10960)

• You may now specify your own fetcher identifier via useFetcher({ key: string }), which allows you to access the same fetcher instance from different components in your application without prop-drilling
• Fetcher keys are now exposed on the fetchers returned from useFetchers so that they can be looked up by key
• Form and useSumbit now support optional navigate/fetcherKey props/params to allow kicking off a fetcher submission under the hood with an optionally user-specified key
  • <Form method="post" navigate={false} fetcherKey="my-key">
  • submit(data, { method: "post", navigate: false, fetcherKey: "my-key" })
  • Invoking a fetcher in this way is ephemeral and stateless
  • If you need to access the state of one of these fetchers, you will need to leverage useFetchers() or useFetcher({ key }) to look it up elsewhere

Persistence Future Flag (future.v7_fetcherPersist)

Per the same RFC as above, we've introduced a new future.v7_fetcherPersist flag that allows you to opt-into the new fetcher persistence/cleanup behavior. Instead of being immediately cleaned up on unmount, fetchers will persist until they return to an idle state. This makes pending/optimistic UI much easier in scenarios where the originating fetcher needs to unmount. (#10962)

• This is sort of a long-standing bug fix as the useFetchers() API was always supposed to only reflect in-flight fetcher information for pending/optimistic UI -- it was not intended to reflect fetcher data or hang onto fetchers after they returned to an idle state
• Keep an eye out for the following specific behavioral changes when opting into this flag and check your app for compatibility:
  • Fetchers that complete while still mounted will no longer appear in useFetchers() after completion - they served no purpose in there since you can access the data via useFetcher().data
  • Fetchers that previously unmounted while in-flight will not be immediately aborted and will instead be cleaned up once they return to an idle state
    • They will remain exposed via useFetchers while in-flight so you can still access pending/optimistic data after unmount
    • If a fetcher is no longer mounted when it completes, then it's result will not be post processed - e.g., redirects will not be followed and errors will not bubble up in the UI
    • However, if a fetcher was re-mounted elsewhere in the tree using the same key, then it's result will be processed, even if the originating fetcher was unmounted

Other Minor Changes

• Add support for optional path segments in matchPath (#10768)

Patch Changes

• Fix the future prop on BrowserRouter, HashRouter and MemoryRouter so that it accepts a Partial<FutureConfig> instead of requiring all flags to be included (#10962)
• Fix router.getFetcher/router.deleteFetcher type definitions which incorrectly specified key as an optional parameter (#10960)

Full Changelog: 6.17.0...6.18.0

v6.17.0

Minor Changes

View Transitions 🚀

We're excited to release experimental support for the the View Transitions API in React Router! You can now trigger navigational DOM updates to be wrapped in document.startViewTransition to enable CSS animated transitions on SPA navigations in your application. (#10916)

The simplest approach to enabling a View Transition in your React Router app is via the new <Link unstable_viewTransition> prop. This will cause the navigation DOM update to be wrapped in document.startViewTransition which will enable transitions for the DOM update. Without any additional CSS styles, you'll get a basic cross-fade animation for your page.

If you need to apply more fine-grained styles for your animations, you can leverage the unstable_useViewTransitionState hook which will tell you when a transition is in progress and you can use that to apply classes or styles:

function ImageLink(to, src, alt) {
  const isTransitioning = unstable_useViewTransitionState(to);
  return (
    <Link to={to} unstable_viewTransition>
      <img
        src={src}
        alt={alt}
        style={{
          viewTransitionName: isTransitioning ? "image-expand" : "",
        }}
      />
    </Link>
  );
}

You can also use the <NavLink unstable_viewTransition> shorthand which will manage the hook usage for you and automatically add a transitioning class to the <a> during the transition:

a.transitioning img {
  view-transition-name: "image-expand";
}

<NavLink to={to} unstable_viewTransition>
  <img src={src} alt={alt} />
</NavLink>

For an example usage of View Transitions, check out our fork of the awesome Astro Records demo.

For more information on using the View Transitions API, please refer to the Smooth and simple transitions with the View Transitions API guide from the Google Chrome team.

Patch Changes

• Log a warning and fail gracefully in ScrollRestoration when sessionStorage is unavailable (#10848)
• Fix RouterProvider future prop type to be a Partial<FutureConfig> so that not all flags must be specified (#10900)
• Allow 404 detection to leverage root route error boundary if path contains a URL segment (#10852)
• Fix ErrorResponse type to avoid leaking internal field (#10876)

Full Changelog: 6.16.0...6.17.0