Example from https://react-md.dev/packages/link/demos#third-party-routing-libraries

Link Example - Third Party Routing Libraries

<!DOCTYPE html>
<html lang="en" class="light-theme">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,500,700|Source+Code+Pro"
    />
    
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/mlaursen/react-md@5.1.6/themes/react-md.teal-pink-200-light.min.css"
    />
    <title>Link Example - Third Party Routing Libraries</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

import type { ReactElement } from "react";
import Link from "./Link";
import { useRouter } from "next/router";

export default function Demo(): ReactElement {
  const { asPath } = useRouter();
  const prefix = asPath.replace(/#.*$/, "");
  return (
    <ul>
      <li>
        <Link href={`${prefix}#with-icons`}>With Icons demo link</Link>
      </li>
    </ul>
  );
}


import type { ReactElement, ReactNode } from "react";
import type { LinkProps as NextLinkProps } from "next/link";
import NextLink from "next/link";
import { Link as RMDLink } from "@react-md/link";

export interface LinkProps extends Omit<NextLinkProps, "as" | "children"> {
  id?: string;
  className?: string;
  children: ReactNode;
  href: string;
}

export default function Link({
  children,
  shallow,
  scroll,
  replace,
  href,
  passHref,
  ...props
}: LinkProps): ReactElement {
  if (href.startsWith("http")) {
    return (
      <RMDLink {...props} href={href}>
        {children}
      </RMDLink>
    );
  }

  return (
    <NextLink
      shallow={shallow}
      scroll={scroll}
      replace={replace}
      href={href}
      passHref={passHref}
    >
      <RMDLink {...props}>{children}</RMDLink>
    </NextLink>
  );
}

Link.defaultProps = {
  passHref: true,
};


@use "@react-md/theme/dist/color-palette" as *;
// Note: Outside of codesandbox, this can be `@forward "react-md" with (`
@forward "react-md/dist/everything" with (
  $rmd-theme-light: true,
  $rmd-theme-primary: $rmd-teal-500,
  $rmd-theme-secondary: $rmd-pink-a-200,
);


import { render } from "react-dom";
import { Configuration } from "@react-md/layout";

// the styles are actually loaded as the pre-compiled themes in the index.html
// to speed up sandbox compilation. If you want to update the theme, you'll need
// to uncomment this line and remove the `<link>` tag in the `index.html`
// import "./styles.scss"

import Demo from "./Demo";

const App = () => (
  <Configuration>
    <Demo />
  </Configuration>
);

render(<App />, document.getElementById("root"));


@use "./everything" as *;

@include react-md-utils;
