时间戳

首页 > 解决方案 > React JS：为单个导航链接获取两个导航链接

reactjs - React JS：为单个导航链接获取两个导航链接

问题描述

这是我的导航栏代码：

<Navbar.Collapse id="basic-navbar-nav">
    <Nav className="mr-auto"></Nav>
    <Nav>
        <Nav.Link href="/Home">HOME</Nav.Link>
        {this.state.role== 'admin' && <Nav.Link href={"/adminhome/"+this.state.uid}>DASHBOARD</Nav.Link>}
        {this.state.role== 'farmer' && <Nav.Link href={"/userhome/"+this.state.uid}>DASHBOARD</Nav.Link>}
        {this.state.role== 'buyer' && <Nav.Link href={"/buyerhome/"+this.state.uid}>DASHBOARD</Nav.Link>}              
        {this.state.role== 'buyer' && <Nav.Link href={"/buyerhome/"+this.state.uid}>DASHBOARD</Nav.Link>}
        <NavDropdown title={window.localStorage.getItem("username")} id="basic-nav-dropdown">
            <NavDropdown.Item href={"/updateProfile/" + this.state.uid}>Update Profile</NavDropdown.Item>
            <NavDropdown.Item href="/Home" onClick={() => window.sessionStorage.clear() }>Sign out</NavDropdown.Item>
        </NavDropdown>
    </Nav>
</Navbar.Collapse>

当这个组件被渲染时，我得到两个导航链接来代替一个。

这是在浏览器上呈现的。

标签： reactjs

解决方案

它出现了两次，因为您两次编写了相同的代码。请删除其中一项

{this.state.role== 'buyer' && <Nav.Link href={"/buyerhome/"+this.state.uid}>DASHBOARD</Nav.Link>}

推荐阅读