web-dev-qa-db-ja.com

Material UIの反応ボタンを反応ルーターDOMリンクとして機能させる方法は？

Material UI反応Buttonコンポーネントをreact-router-domから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>
javascriptreactjsreact-routermaterial-uireact-router-dom
12
Diogo Capela

わかりました。これは非常に簡単です。なぜうまくいかなかったのかわかりません。

このようにしてください：

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>
20
Diogo Capela

<Button />を<Link />コンポーネント内にラップする必要があります。

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

const ButtonWithLink = () => (
  <Link to="/about">
   <Button variant="contained" color="primary">
     About Page
   </Button>
  </Link>
)
4
Peeyush Kumar