Fix types for UIMatch to reflect data may be undefined

[rossipedia]

A pattern that I see (and have used) a lot is to define methods on handle that accept the current match. Since this is invoked from a parent route, there's no guarantee that the data for that route will be available (for example if the loader errors).

For example, something like a breadcrumb (pardon the lengthy setup):

// _layout.tsx

type MyRouteHandle<D = unknown> = {
  breadcrumb: (match: UIMatch<D, MyRouteHandle<D>>, i: number, matches: UI) => ReactNode;
};

export default function Layout() {
  const matches: UIMatch<MyRouteHandle>[] = useMatches();

  const breadcrumbs: ReactNode[] = matches
    .map((match, i, matches) => {
      if (typeof match.handle?.breadcrumb === 'function') {
        return match.handle.breadcrumb(match, i, matches);
      }
      return null;
    })
    .filter((n): n is ReactNode => !!n);

  // render breadcrumbs
}


// _layout.some.sub.route.tsx
export async function loader({ request }: LoaderFunctionArgs) {
  const user = await requireUser(request);
  return json({ user });
}

export const handle: MyRouteHandle<typeof loader> {
  breadcrumb: (match) => {

    // Since `UIMatch<typeof loader>` resolves to a JS object, TS thinks that `match.data.user`
    // is always defined, where in reality there is no guarantee that a particular match will actually have data (there are conditions where it is `undefined`).
    // This will result in a "TypeError: cannot read properties of undefined"
    const { username } = match.data.user;

    return (
      <li>
        <Link to={`/users/${username}`}>{username}</Link>
      </li>
    );
  }
};

By defining UIMatch['data'] to include undefined, it directs the engineer to handle the case where there's no loader data, with additional help from TS when strict: true.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: bc128915e35faf2be88e04f27f3dde0d90973a5d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 11 packages

Name	Type
react-router	Patch
@react-router/architect	Patch
@react-router/cloudflare	Patch
@react-router/dev	Patch
react-router-dom	Patch
@react-router/express	Patch
@react-router/node	Patch
@react-router/serve	Patch
@react-router/fs-routes	Patch
@react-router/remix-routes-option-adapter	Patch
create-react-router	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[remix-cla-bot[bot]]

Hi @rossipedia,

Welcome, and thank you for contributing to React Router!

Before we consider your pull request, we ask that you sign our Contributor License Agreement (CLA). We require this only once.

You may review the CLA and sign it by adding your name to contributors.yml.

Once the CLA is signed, the CLA Signed label will be added to the pull request.

If you have already signed the CLA and received this response in error, or if you have any questions, please contact us at [email protected].

Thanks!

- The Remix team

[remix-cla-bot[bot]]

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

[brophdawg11]

Sorry for the delay here! This one sat for a while and Pedro and I finally discussed it earlier this year but then I went on paternity leave and it fell through the cracks 😬

[github-actions[bot]]

🤖 Hello there,

We just published version 7.8.0-pre.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions[bot]]

🤖 Hello there,

We just published version 7.8.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!