web-dev-qa-db-fra.com

Comment faire réagir un bouton Material UI comme un lien react-router-dom?

Comment puis-je faire un Material UI react Button component agir comme un Link component from react-router-dom sans perdre son style d'origine ? Comme changer l'itinéraire en un clic.

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

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

Pour quelque chose comme ça, mais en conservant le style Button d'origine:

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

D'accord, c'est très facile, je ne sais pas pourquoi cela ne fonctionnait pas avec moi:

Faites comme ça:

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

Vous devez envelopper le <Button /> à l'intérieur de <Link /> composant.

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