禁用navlink反应路由器答案

【问题标题】：disabling navlink react router禁用navlink反应路由器
【发布时间】：2018-08-24 03:22:09
【问题描述】：

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

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

【问题讨论】：

尝试使用"#"
它工作:)。谢谢。

标签： reactjs react-router

【解决方案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>
}

【讨论】：

【解决方案2】：

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

【讨论】：

如果你将 href 设置为布尔值，React 实际上会抛出一个警告，但只要不指定 href 属性也可以。

【解决方案3】：

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

NavBar --> 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;
  }
`

【讨论】：