1. ホーム
  2. javascript

[解決済み] Material UI react Buttonをreact-router-dom Linkとして動作させるには?

2022-03-11 09:47:08

質問

を作るにはどうしたらいいのでしょうか? マテリアルUI 反応 Button コンポーネントとして機能します。 Link コンポーネントから リアクトルータードム 元のスタイルを失うことなく?クリック時にルートを変更するような。

import Button from '@material-ui/core/Button';

<Button variant="contained" color="primary">
    About Page
</Button>

このようなものに、しかし元を維持したまま Button のスタイルになります。

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

<Button variant="contained" color="primary">
    <Link to="/about">
        About Page
    </Link>
</Button>

解決方法は?

OK、これはとても簡単です。なぜ私とうまくいかなかったのかわかりません。

このようにするだけです。

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

<Button component={Link} to="/about" variant="contained" color="primary">
  About Page
</Button>

詳細については、以下をご覧ください。 https://next.material-ui.com/guides/routing/ .