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> ); }