react-router: Cómo deshabilitar un si está activo?

Question 1

¿Cómo puedo desactivar un <Link> en react-router, si su URL ya está activa? Por ejemplo, si mi URL no cambiara al hacer clic en <Link> Quiero evitar hacer clic o renderizar un <span> en lugar de un <Link>.

La única solución que se me ocurre es usar activeClassName (o activeStyle) y ajuste pointer-events: none;pero prefiero usar una solución que funcione en IE9 e IE10.

Question 2

Puedes usar CSS pointer-events atributo. Esto funcionará con la mayoría de los navegadores. Por ejemplo, su código JS:

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

y CSS:

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

Enlaces:

Propiedad CSS de eventos de puntero
Cómo deshabilitar enlaces HTML

La respuesta adjunta Cómo deshabilitar los enlaces HTML sugiere usar ambos disabled y pointer-events: none para obtener la máxima compatibilidad con el navegador.

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

Enlace a la fuente: Cómo deshabilitar el enlace

Question 3

Esto funciona para mí:

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

Question 4

No voy a preguntar por qué querrías este comportamiento, pero supongo que puedes envolver <Link /> en su propio componente de enlace personalizado.

<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, pero probablemente tengas una idea general…)

Question 5

Otra posibilidad es deshabilitar el evento de clic si ya se está haciendo clic en la misma ruta. Aquí hay una solución que funciona con 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);

Luego puede usar su enlace como (cualquier accesorio adicional de Link trabajaría):

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

Question 6

Todos la bondad de Reaccionar enrutador NavLink con el deshabilitar capacidad.

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

Question 7

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


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

Puedes probar esto, esto funcionó para mí.

Question 8

Reaccionar del enrutador Route el componente tiene tres maneras diferentes para renderizar contenido basado en la ruta actual. Tiempo component se usa más típicamente para mostrar un componente solo durante un partido, el children componente toma en un ({match}) => {return <stuff/>} devolución de llamada que puede representar cosas encajonadas en el partido incluso cuando las rutas no coinciden.

Creé una clase NavLink que reemplaza un enlace con un lapso y agrega una clase cuando es to la ruta está activa.

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

Luego crea un enlace de navegación así

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

NavLink del enrutador React hace algo similar, pero aún permite al usuario hacer clic en el enlace y enviar el historial.

¿Ha sido útil esta solución?