小编Tor*_*ben的帖子

我使用导航栏作为页面上的组件，它使用路由器来更改内容。到目前为止，一切都运行良好。但我可以\xc2\xb4t弄清楚，当单击导航栏中的链接时，如何将它们的状态设置为活动状态。我想，我必须将 Nav 元素的 activeKey 绑定到活动内容的 location.pathname 。

这是我的导航栏组件：

import React from 'react';\nimport { Navbar, Nav } from 'react-bootstrap';\n\nclass Navbar extends React.Component{\n\n    constructor() {\n        super();\n        this.state = {\n          show: false\n        };\n      }\n\n    render(){\n        return(\n            <div>\n                <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">\n                    <Navbar.Brand >Filmmusic</Navbar.Brand>\n                    <Navbar.Toggle aria-controls="responsive-navbar-nav" />\n                    <Navbar.Collapse id="responsive-navbar-nav">\n                    <Nav activeKey="/" className="mr-auto">\n                        <Nav.Link href="/">Home</Nav.Link>\n                        <Nav.Link href="/about">About</Nav.Link>\n                        <Nav.Link onClick = {()=>{this.handleModal()}}>Contact</Nav.Link>\n                    </Nav>\n                    <Nav>\n                        <Nav.Link href="/impressum">Impressum</Nav.Link>\n                        <Nav.Link href="/datenschutzerklaerung">Datenschutzerkl\xc3\xa4rung</Nav.Link>\n                    </Nav>\n                    </Navbar.Collapse>\n                </Navbar>\n            </div>\n        )\n    }\n    \n}\n\nexport default Navbar;\n