Material-ui: Usage of new Link component (e.g. together with react router dom)

[Primajin]

Not sure if this is a bug or if I'm just not using it right.
First of all, link component from #14093 is very useful - so I don't need to hack

export default () =>
  createStyles({
    global: {
      '& a': {
        '&:hover': {
          color: light
        },
        color: main
      }
    }
  });

in my highest class anymore - cool.
Now I wanted to change all my self-made <a> into mui <Link>.
We are using react-router-dom who also have <Link>/<Navlink>. They don't have the possibility to inject what component should be used, so I tried it the other way round:

<Link
    component={({ className }) => (
      <NavLink className={className} to={`/myPath/${value}`} data-some-attribute="some-value" title={value}>
        {value}
      </NavLink>
    )}
  >
    No matter what I put here it will not be rendered
  </Link>

Now my issue is, Link requires children, although they will not be rendered if the injected component has one. Can we make children optional?

Also I get a typescript error if I just pass strings to Link as href and child:

<Link href="https://www.nasa.gov/multimedia/imagegallery/image_feature_1188.html">NASA</Link>

TS2322: Type '{ children: string; href: string; }' is not assignable to type 'IntrinsicAttributes & LinkProps & { children?: ReactNode; }'.   Property 'href' does not exist on type 'IntrinsicAttributes & LinkProps & { children?: ReactNode; }'.

[Primajin]

Stupid me - rubber duck phenomenon:

<Link
    component={({ className, children }) => (
      <NavLink className={className} to={`/myPath/${value}`} data-some-attribute="some-value" title={value}>
        {children}
      </NavLink>
    )}
  >
    {value}
  </Link>

does the trick

[mvdobrinin]

There is a nice integration example with React Router: https://material-ui.com/components/links/#third-party-routing-library.