React-Router: So deaktivieren Sie a wenn es aktiv ist?

Lesezeit: 6 Minuten

Wie kann ich a deaktivieren <Link> im React-Router, wenn dessen URL bereits aktiv ist? ZB wenn sich meine URL bei einem Klick auf nicht ändern würde <Link> Ich möchte das Klicken überhaupt verhindern oder einen rendern <span> anstelle einer <Link>.

Die einzige Lösung, die mir in den Sinn kommt, ist die Verwendung activeClassName (oder activeStyle) und Einstellung pointer-events: none;aber ich möchte lieber eine Lösung verwenden, die in IE9 und IE10 funktioniert.

  • stackoverflow.com/a/10276157/1642219

    – Udit Bhardwaj

    12. März 2016 um 22:10 Uhr

  • @UDB-Rendering a <span> Anstatt von <a> ist völlig in Ordnung. Diese Frage war spezifisch für den React-Router – keine allgemeine Frage. Aber danke.

    – Pipo

    13. März 2016 um 19:08 Uhr

Benutzeravatar von Denis Bubnov
Denis Bunov

Sie können CSS verwenden pointer-events Attribut. Dies funktioniert mit den meisten Browsern. Zum Beispiel Ihr JS-Code:

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

und CSS:

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

Verbindungen:

In der beigefügten Antwort zum Deaktivieren von HTML-Links wird empfohlen, beide zu verwenden disabled und pointer-events: none für maximale Browser-Unterstützung.

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

Link zur Quelle: So deaktivieren Sie Link

  • Es ist wichtig zu beachten, dass die pointer-events Technik wird nur Klicks von einem Zeigegerät deaktivieren. Es ist immer noch möglich, den Link mit der Tastatur auszuwählen und zu aktivieren.

    – matharden

    8. Oktober 2021 um 12:23 Uhr

  • Dieser Ansatz ist nicht sicher. Ein Benutzer kann die deaktivierte Verknüpfung mithilfe von Entwicklungstools umgehen.

    – Si Do

    5. November um 9:52

Das funktioniert bei mir:

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

  • Wo ist isActive kommen von?

    – Drazen Bjelovuk

    23. Juni 2020 um 19:04 Uhr

  • Es kommt von Requisiten/Zustand.

    – Milen Gardew

    30. Juni 2020 um 18:01 Uhr

  • Es wird an den Anfang der Seite verschoben. href="#" ist wirklich ärgerlich für die Benutzer.

    – Kevin Beal

    3. März um 16:05 Uhr

  • Dadurch wird die Link-Komponente nicht deaktiviert, der Benutzer kann auf diese Weise immer noch auf den aktiven Link klicken.

    – huntzinger92

    4. April um 20:45 Uhr

Ich werde nicht fragen, warum Sie dieses Verhalten wollen, aber ich denke, Sie können umbrechen <Link /> in Ihrer eigenen benutzerdefinierten Linkkomponente.

<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, aber Sie haben wahrscheinlich die allgemeine Vorstellung …)

  • Ich kann verstehen, warum das nützlich wäre. Wenn das -Tag durch ein – oder ein -Tag ersetzt wird, wird der Link zu einem fett gedruckten Element in einer Liste von Breadcrumbs, wenn auf den Link geklickt wird. Durch Klicken auf einen anderen Breadcrumb-Link wird das -Tag für den vorherigen Klick aktiviert und der Linkstatus „Fett + Deaktiviert“ auf den neu angeklickten Link angewendet.

    – Klump

    6. Juni 2016 um 19:01 Uhr

  • Mit React-Router v4 müssen Sie verwenden this.props.history.location.pathname Anstatt von this.props.route

    – nbeuchat

    28. Januar 2018 um 2:19 Uhr

  • Ich empfehle auch zu verwenden {this.props.children} anstatt neue Requisiten hinzuzufügen linktext. Auf diese Weise können Sie diese Komponente wirklich ganz normal verwenden Link Komponente.

    – nbeuchat

    28. Januar 2018 um 2:21 Uhr

  • Diese Lösung ist nicht zugänglich. Du solltest bestehen aria-disabled="true" und entweder die entfernen to (obwohl Link erfordert, dass Sie es bestehen) oder verwenden preventDefault.

    – SRachamim

    20. Juli 2020 um 8:39 Uhr

  • Verwenden Sie besser die matchPath-Funktion aus der React-Router-Bibliothek, um zu überprüfen, ob die Route aktiv ist. Die oben genannte Lösung wird nicht in allen Fällen funktionieren, verlassen Sie sich also nicht auf den === Vergleich.

    – Regenschirm

    1. Januar um 15:46 Uhr

Eine andere Möglichkeit besteht darin, das Klickereignis zu deaktivieren, wenn Sie bereits auf denselben Pfad klicken. Hier ist eine Lösung, die funktioniert mit 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);

Sie können Ihren Link dann als (alle zusätzlichen Requisiten von Link würde funktionieren):

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

Alle die Güte von Router NavLink reagieren mit dem deaktivieren Fähigkeit.

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>
    }
  </>
});

  • props hat kein Vermögen to und keine String-Index-Signatur.

    – Frederik Krautwald

    13. Juni 2018 um 12:39 Uhr

  • Ich bin mir nicht sicher, ob ich Ihre Bemerkung verstehe, aber beachten Sie das const Link... ist ein HOC. Auch Requisiten sind die Zusammenführung von withRouter gegebene Requisiten und das Übliche Link Requisiten. to gehört zu den Requisiten des Verpackten Link. PS: NavLink ist eine spezielle Version von Link und trägt als solches a to Stütze auch. reagierentraining.com/react-router/web/api/NavLink

    – fsenart

    13. Juni 2018 um 13:15 Uhr

  • Ah, tut mir leid, die “typisierte” Lösung ist außerhalb des Geltungsbereichs, ich ziehe es vor, eine absichtlichere Lösung zu geben. Sie können jedoch gerne eine getippte Version mit Ihrem bevorzugten Dialekt bereitstellen.

    – fsenart

    13. Juni 2018 um 13:27 Uhr

Benutzeravatar von Kishan Bharda
Kishan Bharda

const [isActive, setIsActive] = useState(true); 


<Link to={isActive ? '/link-to-route' :  null} />

Sie können dies versuchen, das hat bei mir funktioniert.

  • props hat kein Vermögen to und keine String-Index-Signatur.

    – Frederik Krautwald

    13. Juni 2018 um 12:39 Uhr

  • Ich bin mir nicht sicher, ob ich Ihre Bemerkung verstehe, aber beachten Sie das const Link... ist ein HOC. Auch Requisiten sind die Zusammenführung von withRouter gegebene Requisiten und das Übliche Link Requisiten. to gehört zu den Requisiten des Verpackten Link. PS: NavLink ist eine spezielle Version von Link und trägt als solches a to Stütze auch. reagierentraining.com/react-router/web/api/NavLink

    – fsenart

    13. Juni 2018 um 13:15 Uhr

  • Ah, tut mir leid, die “typisierte” Lösung ist außerhalb des Geltungsbereichs, ich ziehe es vor, eine absichtlichere Lösung zu geben. Sie können jedoch gerne eine getippte Version mit Ihrem bevorzugten Dialekt bereitstellen.

    – fsenart

    13. Juni 2018 um 13:27 Uhr

Benutzeravatar von Wesss
Wess

Routers reagieren Route Komponente hat drei verschiedene Wege zum Rendern von Inhalten basierend auf der aktuellen Route. Während component wird am häufigsten verwendet, um eine Komponente nur während eines Spiels zu zeigen, die children Komponente nimmt ein ({match}) => {return <stuff/>} Rückruf, der Dinge bei Übereinstimmung rendern kann auch wenn die Routen nicht übereinstimmen.

Ich habe eine NavLink-Klasse erstellt, die einen Link durch eine Spanne ersetzt und eine Klasse hinzufügt, wenn dies der Fall ist to Strecke ist aktiv.

class NavLink extends Component {
  render() {
    var { className, activeClassName, to, exact, ...rest } = this.props;
    return(
      <Route
        path={to}
        exact={exact}
        children={({ match }) => {
          if (match) {
            return <span className={className + " " + activeClassName}>{this.props.children}</span>;
          } else {
            return <Link className={className} to={to} {...rest}/>;
          }
        }}
      />
    );
  }
}

Erstellen Sie dann so einen Navlink

<NavLink to="/dashboard" className="navlink" activeClassName="active">

NavLink des Routers reagieren macht etwas Ähnliches, aber das erlaubt dem Benutzer immer noch, auf den Link zu klicken und den Verlauf zu pushen.

1434450cookie-checkReact-Router: So deaktivieren Sie a wenn es aktiv ist?

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

Privacy policy