React Bootstrap 将导航栏的链接更改为活动状态

Question

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

\n

这是我的导航栏组件：

\n

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

\n

Answer 1

多谢！现在一切正常:)我将导航栏代码写入index.js，而不是使用组件。我将所有组件都放在 Router 元素下方。这是我的 index.js 的最终代码：

\n

import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './App.css';\nimport 'bootstrap/dist/css/bootstrap.min.css';\nimport { BrowserRouter as Router, Route, Switch} from 'react-router-dom';\nimport { Home } from './components/Home';\nimport { About } from './components/About';\nimport { Contact } from './components/Contact';\nimport { NoMatch } from './components/NoMatch';\nimport { Impressum } from './components/Impressum';\nimport { Datenschutzerklaerung } from './components/Datenschutzerklaerung';\nimport { Layout } from './components/Layout';\nimport { Jumbotron } from './components/Jumbotron';\nimport Footer from './components/Footer';\nimport './fontawesome';\nimport { Navbar, Nav } from "react-bootstrap";\nimport { withRouter } from "react-router";\n\nconst Header = props => {\n  const { location } = props;\n  return (\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={location.pathname} className="mr-auto">\n          <Nav.Link href="/">Home</Nav.Link>\n          <Nav.Link href="/about">About</Nav.Link>\n          <Nav.Link href="/contact">Contact</Nav.Link>\n      </Nav>\n      <Nav activeKey={location.pathname}>\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  );\n};\nconst HeaderWithRouter = withRouter(Header);\n\nclass MyHeader extends React.Component {\n\n  render() {\n    return (\n      <React.Fragment>\n        <Router>\n        <HeaderWithRouter />\n        <Jumbotron />\n          <Switch>\n            <Route exact path="/" component={Home} />\n            <Layout>\n              <Route path="/about" component={About} />\n              <Route path="/contact" component={Contact} />\n              <Route path="/impressum" component={Impressum} />\n              <Route path="/datenschutzerklaerung" component={Datenschutzerklaerung} />\n            </Layout>\n            <Route component={NoMatch} />\n          </Switch>\n        </Router>\n        <Footer />\n      </React.Fragment>\n    );\n  }\n}\n\nReactDOM.render(<MyHeader />, document.getElementById('root'));\n

\n