réagir-routeur: Comment faire pour désactiver un <Lien>, si son actif?
Comment puis-je désactiver un <Link>
dans réagissent-routeur, si son URL déjà active? E. g. si mon URL ne change pas d'un clic sur <Link>
je veux éviter de cliquer à tout ou rendre un <span>
au lieu d'un <Link>
.
La seule solution qui me vient à l'esprit est à l'aide de activeClassName
(ou activeStyle
) et la mise en pointer-events: none;
, mais je serais plutôt du genre à utiliser une solution qui fonctionne dans IE9 et IE10.
- stackoverflow.com/a/10276157/1642219
- Le rendu d'une
<span>
au lieu de<a>
est tout à fait bien. Cette question est spécifique à réagir-routeur - n'est pas une question d'ordre général. Mais je vous remercie.
Vous devez vous connecter pour publier un commentaire.
Je ne vais pas vous demander pourquoi vous voulez ce comportement, mais je suppose que vous pouvez envelopper
<Link />
dans votre lien personnalisé composant.<MyLink to="/foo/bar" linktext="Maybe a link maybe a span" route={this.props.route} />
(ES6, mais vous avez probablement l'idée générale...)
this.props.history.location.pathname
au lieu dethis.props.route
{this.props.children}
au lieu de l'ajout d'un nouveau accessoireslinktext
. De cette façon, vous pouvez vraiment utiliser ce composant normalLink
composant.Vous pouvez utiliser CSS,
pointer-events
attribut. Il sera compatible avec plus de navigateurs. Par exemple, vous code:et CSS:
Liens:
La Comment faire pour désactiver les liens HTML réponse jointe a suggéré d'utiliser les deux
disabled
etpointer-events: none
pour un maximum de navigateur de soutien.Lien de la source: Comment désactiver le Lien
Une autre possibilité est de désactiver l'événement click si, en cliquant sur déjà sur le même chemin. Voici une solution qui fonctionne avec réagissent-routeur v4.
Vous pouvez ensuite utiliser votre lien (supplémentaire des accessoires de
Link
fonctionne):Cela fonctionne pour moi:
Tous la bonté de Réagir Routeur NavLink avec le désactiver capacité.
props
n'a pas de propriététo
et aucune chaîne de l'indice de signature.const Link...
est un HOC. Aussi des accessoires de la fusion dewithRouter
donné des accessoires et de l'habitudeLink
accessoires.to
appartient à la des accessoires de la enveloppéLink
. PS:NavLink
est une version spéciale deLink
et est accompagné d'unto
prop trop. reacttraining.com/react-router/web/api/NavLinkRéagir Routeur
Route
composant a trois façons différentes pour restituer le contenu basé sur l'itinéraire actuel. Alors quecomponent
est le plus souvent utilisé pour montrer un composant uniquement lors d'un match, lechildren
composant prend en({match}) => {return <stuff/>}
de rappel qui peut rendre les choses cartonne sur le match même quand les routes ne correspondent pas.J'ai créé un NavLink classe qui remplace un Lien avec un span et ajoute une classe lors de son
to
route est active.Puis créer un navlink comme
Réagir Routeur NavLink fait quelque chose de similaire, mais qui permet à l'utilisateur de cliquer sur le lien et de pousser l'histoire.
Basé sur nbeuchat la réponse de composant: - j'ai créé une version améliorée de la composante qui remplace
react router's
Link
composant pour mon projet.Dans mon cas, j'ai eu à permettre le passage d'un objet à
to
prop (natifreact-router-dom
lien n'), aussi j'ai ajouté une vérification desearch query
ethash
avec lepathname