Material-UIのLinkコンポーネントとreact-router-linkでページ遷移させる

Reactのmaterial-uiのLinkとreact-router-linkを使ってページ遷移させる書き方が微妙にわからなかったので備忘録がてら。
ルーティングの記述は書いてある前提とします。

Link.jsx

Copied!

import { Link } from "@material-ui/core";
import { Link as RouterLink } from "react-router-dom";

const LinkComponent = (props) => {
  return (
    <Link
     component={RouterLink}
     to={props.to} //遷移先
     color="primary"
    >
     {props.text} //表示するテキスト
    </Link> )
}

解説

ポイントはMaterial-UIのLinkのcompnentにreact-router-domのLinkを渡すことです。
Linkで名前が被ってしまうので、そこはasを使って別名にしてます。

同じような悩みを持っている方のお役に立てれば幸いです。

参考

https://material-ui.com/components/links/
https://material-ui.com/guides/composition/#link