Question

这是我的导航栏代码：

<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>

渲染此组件时，我获得了两个导航链接，而不是一个。

This is rendered on browser.

Answer 1

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

之一

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

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

1 个答案: