Comment se débarrasser du soulignement pour le composant Link de React Router ?

Question

J'ai les éléments suivants :

Comment se débarrasser du soulignement bleu ? Le code est ci-dessous :

<Link to="first"><MenuItem style={{paddingLeft: 13, textDecoration: 'none'}}> Team 1 </MenuItem></Link>

Le composant MenuItem est issu de http://www.material-ui.com/#/components/menu

Answer 1

Le a-link standard et le react-link sont les mêmes.

donc si vous donnez un style à a-link, il donnera automatiquement un style à react-link.

a{ le style que vous voulez }

Answer 2

Juste

<Link
   to={`$path`}
   style={{ borderBottom: "none" }}> 
    .... 
</Link>

Answer 3

Je trouve que cette question et aucune des réponses ne résolvent vraiment le problème dans un cas général (par exemple, si les éléments ne sont pas un MenuItem). Je suggère :

import {useHistory} from "react-router-dom";
const MyComp = () => {
  const history = useHistory();
  return <div>
    <AnyComponent onclick={()=>history.push('/path/u/want')}
  </div>
}

Answer 4

Pour moi, il n'était pas envisageable d'utiliser les composants graphiques de React Router. Je préfère naviguer de manière programmatique à l'aide de React Router .

React Router v5.1.0 avec crochets

Il y a un nouveau useHistory hook dans React Router >5.1.0 si vous utilisez React >16.8.0 et des composants fonctionnels.

import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

Answer 5

Il suffit de l'ajouter à votre fichier css ou à vos styles pour supprimer tout lien provoquant un soulignement !

a:-webkit-any-link{text-decoration: none;}