Question

我正在使用react路由器，我想在某种状态下禁用to属性。我传递了空字符串，但这并没有禁用链接而是占用了页面的基本路径。我甚至试图传递null但是这会破坏代码。甚至可以这样做吗？

<NavLink className="nav-link" to={this.state.role == 4 ? "/pages" : ""}></NavLink>

Answer 1

您可以尝试使用自定义点击处理程序禁用该按钮。

handleClick = (e) => {
    const { linkDisabled } = this.state
    if(linkDisabled) e.preventDefault()
}

render() {
    return (
        <NavLink 
            onClick={this.handleClick} 
            className="nav-link" 
            to="/pages"
        >
            ...
        </NavLink>
    )   
}

您可能希望在禁用按钮时添加一些css

或者你可以根本不显示按钮

{
    this.state.linkDisabled ? 
        null :
        <NavLink className="nav-link" to="/pages"></NavLink>
}

Answer 2

{
    this.state.role !== 4 ? 
        <a href={false} className="nav-link"></a> :
        <NavLink className="nav-link" to="/pages"></NavLink>
}

Answer 3

我用的和 Stretch0 一样，但我只是改成功能组件只有我的确认被禁用我的样式链接与 NavLink 相同：

导航栏 --> index.js

export default function NavBar() {
  const handleClick = (e) => {
  e.preventDefault()
}
  return (
    <Body>
      <Header>
        <Nav>
          <StyledLink exact activeClassName="current" to="/">
            <MenuLinks>CART</MenuLinks>
          </StyledLink>
          <StyledLink activeClassName="current" to="/payment">
            <MenuLinks>PAYMENT</MenuLinks>
          </StyledLink>
          <StyledLink activeClassName="current"  onClick={handleClick} to="/confirmation">
            <MenuLinks>CONFIRMATION</MenuLinks>
          </StyledLink>
        </Nav>
      </Header>
    </Body>
  )
}

NavBar ---> Styles.js

export const StyledLink = styled(NavLink)`
  text-decoration: none;
  color: #d6d6d6;
  display: flex;
  cursor: pointer;
  ${(props) => props.disabled && `
  cursor: default;`}
  &.${(props) => props.activeClassName} {
    color: #fe8d3b;
  }
  &:focus,
  &:hover,
  &:visited,
  &:link,
  &:active {
    text-decoration: none;
  }
`

禁用navlink反应路由器

3 个答案: