Wie kann eine Material-UI-Reaktionsschaltfläche als React-Router-Dom-Link fungieren?

Lesezeit: 3 Minuten

Wie kann ich ein Material-Benutzeroberfläche reagieren Button Komponente fungiert als Link Komponente aus React-Router-Dom ohne seinen ursprünglichen Stil zu verlieren? Als würde man die Route per Klick ändern.

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

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

Zu so etwas, aber unter Beibehaltung des Originals Button Stil:

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>

  • Mögliches Duplikat von Material-ui, das eine Link-Komponente von React-Router hinzufügt

    – Tholle

    1. August 2018 um 21:46 Uhr

Benutzeravatar von Diogo Capela
Diogo Capela

Okay, das ist ganz einfach, ich weiß nicht, warum es bei mir nicht funktioniert hat:

Machen Sie einfach so:

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>

Weitere Details finden Sie unter https://mui.com/material-ui/guides/routing/.

  • wie man weitere Attribute wie z.B. angibt exact für Link?

    – Zinn

    6. Dezember 2019 um 14:39 Uhr

  • Das würde den Rahmen dieser Frage sprengen, aber trotzdem dynamisch machen? Angenommen, ich übergebe keine Link-Requisite, verwende sie nicht component={ Link }

    – Riza Khan

    7. März 2021 um 15:12 Uhr

  • Es sieht so aus, als ob das jetzt in der MUI 5-Version ganz anders ist. mui.com/guides/routing

    – brandonscript

    2. Okt. 2021 um 4:52

MUI 5 hat dies noch weiter vereinfacht. Geben Sie einfach eine MUI an Button mit einem href Attribut wie folgt:

import Button from '@mui/material/Button';


<Button href="/" variant="contained">
  Link
</Button>

  • Dies sollte eine ausgewählte Antwort sein. Danke.

    – marko424

    19. Okt. 2022 um 9:28

  • Dabei wird keine React-Router-Link-Komponente verwendet. Es wird eine HTML-Komponente verwendet, die die Standardkomponente ist.

    – Maiky

    16. Februar um 9:00 Uhr

  • @Maiky Die Standardkomponente, die für verwendet wird Button bei der Bereitstellung einer href Eigenschaft ist ein Anker <a>. Sie können jedoch angeben, welche Komponente mit der Eigenschaft verwendet werden soll LinkComponentZum Beispiel LinkComponent={Link} .

    – Bro3Simon

    17. Mai um 16:19 Uhr


Sie müssen das einpacken <Button /> im Inneren <Link /> Komponente.

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

  • dieser Weg funktioniert auch. Sie müssen nur das Styling angeben, um die Unterstreichung zu entfernen Link. Danke

    – Valay

    3. August 2019 um 16:52 Uhr

  • Das war äußerst hilfreich für ein Problem, das ich hatte und für das ich einen Wrapper habe Link und so component={Link} Die Methode führte aus irgendeinem Grund dazu, dass der Stil von Material-UI verloren ging. Mit dieser Methode wurde das Styling wiederhergestellt.

    – c_sagan

    16. Dezember 2019 um 16:56 Uhr

  • Eine Schaltfläche innerhalb eines Links ist kein gültiges HTML (siehe auch stackoverflow.com/questions/6393827/…) und selbst wenn sie von Browsern analysiert werden kann, ist ihre Semantik schlecht und verursacht schwerwiegende Probleme.

    – Filoxo

    12. Juli 2022 um 3:51


Isuru Bandaras Benutzeravatar
Isuru Bandara

Dieser Weg hat bei mir funktioniert

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

const YourComponentName = () =>{

    const history = useHistory();
    const handleRoutes = (path) =>{
       history.push(path)
    }
    
  return(
    <>
      ...
      <Button 
         variant="contained" 
         color="primary" 
         onClick={() => handleRoutes('/about')}>
         About Page
      </Button>
      ...
    </>
)
}

1453140cookie-checkWie kann eine Material-UI-Reaktionsschaltfläche als React-Router-Dom-Link fungieren?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy