修复 React Bootstrap 中的活动导航链接

Question

每当我单击导航链接时，它都不会将链接设置为活动状态。 Bootstrap 不应该自动执行此操作吗？我已经看到了一些关于添加 CSS 代码的建议，但是如何手动将 CSS 代码添加到链接中。例如：用户点击“搜索 Youtube”然后我将 CSS 应用到该链接？谢谢。

<Navbar bg="dark navbar-dark" fixed="top" >
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="mr-auto">
                        <Nav.Link onClick={this.searchYoutubePage} >Search Youtube</Nav.Link>
                        <Nav.Link onClick={this.urlPage} >URL</Nav.Link>
                        <Nav.Link onClick={this.uploadFilePage}>Upload File</Nav.Link>
                    </Nav>
                </Navbar.Collapse>
                <button class="borderlessButton" onClick={this.closeModal}><BsXCircle /></button>
            </Navbar>

Answer 1

为了让active 工作，当您希望链接显示为活动时，您需要在链接上设置active 属性：

// activeCondition should be true whenever you want
// e.g. maybe you can make it true inside searchYoutubePage
<Nav.Link active={activeCondition} onClick={this.searchYoutubePage}>
  Search Youtube
</Nav.Link>