web-dev-qa-db-fra.com

react-router: Comment désactiver un <Link>, s'il est actif?

Comment désactiver un <Link> dans react-router si son URL est déjà active? Par exemple. si mon URL ne change pas en un clic sur <Link>, je souhaite empêcher tout clic ou rendre un <span> au lieu d'un <Link>.

La seule solution qui me vienne à l'esprit consiste à utiliser activeClassName (ou activeStyle) et à définir pointer-events: none;, mais j'aimerais plutôt utiliser une solution qui fonctionne dans IE9 et IE10.

javascriptreactjsreact-router
14
Pipo

Je ne vais pas vous demander pourquoi vous voulez ce comportement, mais je suppose que vous pouvez envelopper <Link /> dans votre propre composant de lien personnalisé.

<MyLink to="/foo/bar" linktext="Maybe a link maybe a span" route={this.props.route} />

class MyLink extends Component {
    render () {
        if(this.props.route === this.props.to){
            return <span>{this.props.linktext}</span>
        }
        return <Link to={this.props.to}>{this.props.linktext}</Link>
    }
}

(ES6, mais vous avez probablement une idée générale ...)

9
dannyjolie

Vous pouvez utiliser l'attribut pointer-events de CSS. Ce sera des travaux avec plus de navigateurs. Par exemple, vous codez:

class Foo extends React.Component {
  render() {
    return (
      <Link to='/bar' className='disabled-link'>Bar</Link>
    );
  }
}

et CSS:

.disabled-link {
  pointer-events: none;
}

Liens: 

Le Comment désactiver les liens HTML answer attaché suggère d'utiliser disabled et pointer-events: none pour un support maximal du navigateur.

a[disabled] {
    pointer-events: none;
}

Lien vers la source: Comment désactiver Link

7
Denis Bubnov

Une autre possibilité consiste à désactiver l'événement click si vous cliquez déjà sur le même chemin. Voici une solution qui fonctionne avec react-router v4.

import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';

class SafeLink extends Component {
    onClick(event){
        if(this.props.to === this.props.history.location.pathname){
            event.preventDefault();
        }

        // Ensure that if we passed another onClick method as props, it will be called too
        if(this.props.onClick){
            this.props.onClick();
        }
    }

    render() {
        const { children, onClick, ...other } = this.props;
        return <Link onClick={this.onClick.bind(this)} {...other}>{children}</Link>
    }
}

export default withRouter(SafeLink);

Vous pouvez ensuite utiliser votre lien en tant que (tout accessoire supplémentaire de Link fonctionnerait): 

<SafeLink className="some_class" to="/some_route">Link text</SafeLink>
3
nbeuchat

Tous la bonté de Réagissez NavLink du routeur avec la capacité désactivée.

import React from "react"; // v16.3.2
import { withRouter, NavLink } from "react-router-dom"; // v4.2.2

export const Link = withRouter(function Link(props) {
  const { children, history, to, staticContext, ...rest } = props;
  return <>
    {history.location.pathname === to ?
      <span>{children}</span>
      :
      <NavLink {...{to, ...rest}}>{children}</NavLink>
    }
  </>
});
1
fsenart

Cela fonctionne pour moi:

<Link to={isActive ? '/link-to-route' : '#'} />
1
tretapey

Je pense que vous devriez atrribuer à = null pour désactiver un lien.

Voir un exemple ici https://stackoverflow.com/a/44709182/4787879

0
Nguyên Cát Phạm