Material-UI の Button と React Router の Link を組み合わせる

Material-UI の Button をクリックしたら、React Router の機能を使ってページ遷移したいことが良くある。

useHistory フックで history オブジェクト取得しておいて、Button の onClick ハンドラ内で history.push してやれば実現できるけど、決まったパスに遷移するだけなので宣言的に書きたい。

調べたところ、Button の component に Link を指定し、to にクリック時の遷移先を指定すればいけるっぽい。メモを残しておく。

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

export function Example() {
  return (
    <Button
      variant="contained"
      color="primary"
      component={Link}
      to="/sign-in"
    >
      新規登録
    </Button>
  );
}