webentwicklung-frage-antwort-db.com.de

react-Router: Wie kann man einen <Link> deaktivieren, wenn er aktiv ist?

Wie kann ich einen <Link> im react-router deaktivieren, wenn seine URL bereits aktiv ist? Z.B. Wenn sich meine URL bei einem Klick auf <Link> nicht ändern würde, möchte ich das Klicken überhaupt verhindern oder einen <span> anstelle eines <Link> darstellen.

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

javascriptreactjsreact-router
14
Pipo

Ich werde nicht fragen, warum Sie dieses Verhalten möchten, aber ich denke, Sie können <Link /> in Ihre eigene benutzerdefinierte Linkkomponente einschließen.

<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 bekommen wahrscheinlich die allgemeine Idee ...)

9
dannyjolie

Sie können das pointer-events-Attribut von CSS verwenden. Es wird mit mehr Browsern funktionieren. Zum Beispiel kodieren Sie:

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

und CSS:

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

Links: 

Die Deaktivierung von HTML-Links Antwort wurde mit disabled und pointer-events: none für maximale Browserunterstützung vorgeschlagen.

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

Link zur Quelle: Deaktivieren des Links

7
Denis Bubnov

Eine andere Möglichkeit besteht darin, das Klickereignis zu deaktivieren, wenn Sie bereits auf denselben Pfad klicken. Hier ist eine Lösung, die mit dem Reakt-Router v4 arbeitet.

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 dann Ihren Link verwenden als (alle zusätzlichen Requisiten von Link würden funktionieren): 

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

All die Güte von React Router NavLink mit der Fähigkeit disable.

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

Die Komponente Route von React Router hat drei verschiedene Möglichkeiten , um Inhalte basierend auf der aktuellen Route zu rendern. Während component am häufigsten verwendet wird, um eine Komponente nur während einer Übereinstimmung anzuzeigen, nimmt die children -Komponente ein ({match}) => {return <stuff/>} Rückruf, der bei Übereinstimmung verdeckte Ereignisse darstellen kann, auch wenn die Routen nicht übereinstimmen .

Ich habe eine NavLink-Klasse erstellt, die einen Link durch einen Span ersetzt und eine Klasse hinzufügt, wenn ihre Route to aktiv ist.

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

Dann erstelle so einen Navlink

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

React Routers NavLink macht etwas Ähnliches, aber das erlaubt dem Benutzer immer noch, in den Link und den Push-Verlauf zu klicken.

1
Wesss

Das funktioniert für mich:

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

Ich denke, Sie sollten to = null verwenden, um einen Link zu deaktivieren.

Ein Beispiel finden Sie hier https://stackoverflow.com/a/44709182/4787879

0
Nguyên Cát Phạm