<Link>如果它的 URL 已经处于活动状态，如何在 react-router 中禁用它？例如，如果我的 URL 在点击时不会改变，<Link>我想完全阻止点击或呈现一个<span>而不是<Link>.
我想到的唯一解决方案是使用activeClassName(or activeStyle) 和 setting pointer-events: none;，但我更愿意使用适用于 IE9 和 IE10 的解决方案。
react-router：如何禁用 <Link>，如果它处于活动状态？
IT技术
javascript
reactjs
react-router
2021-04-23 00:45:53
6个回答
您可以使用 CSS 的pointer-events属性。这将适用于大多数浏览器。例如你的JS代码：
class Foo extends React.Component {
render() {
return (
<Link to='/bar' className='disabled-link'>Bar</Link>
);
}
}
和 CSS：
.disabled-link {
pointer-events: none;
}
链接：
所附的如何禁用 HTML 链接答案建议同时使用disabled和pointer-events: none以获得最大的浏览器支持。
a[disabled] {
pointer-events: none;
}
源链接：如何禁用链接
这对我有用：
<Link to={isActive ? '/link-to-route' : '#'} />
我不会问你为什么想要这种行为，但我想你可以包装<Link />在你自己的自定义链接组件中。
<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，但您可能已经大致了解了...）
另一种可能性是如果已经在同一路径上单击，则禁用单击事件。这是一个适用于 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);
然后你可以使用你的链接（任何额外的propsLink都可以）：
<SafeLink className="some_class" to="/some_route">Link text</SafeLink>
具有禁用功能的React Router NavLink 的所有优点。
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>
}
</>
});