reactjs - React Bootstrap 将导航栏的链接更改为活动
问题描述
我使用导航栏作为页面上的组件,它使用路由器来更改内容。到目前为止,一切正常。但我无法弄清楚,当它们被点击时,如何将导航栏中的链接状态设置为活动状态。我想,我必须将 Nav 元素的 activeKey 绑定到活动内容的 location.pathname。
这是我的导航栏组件:
import React from 'react';
import { Navbar, Nav } from 'react-bootstrap';
class Navbar extends React.Component{
constructor() {
super();
this.state = {
show: false
};
}
render(){
return(
<div>
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Navbar.Brand >Filmmusic</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav activeKey="/" className="mr-auto">
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/about">About</Nav.Link>
<Nav.Link onClick = {()=>{this.handleModal()}}>Contact</Nav.Link>
</Nav>
<Nav>
<Nav.Link href="/impressum">Impressum</Nav.Link>
<Nav.Link href="/datenschutzerklaerung">Datenschutzerklärung</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
)
}
}
export default Navbar;
解决方案
非常感谢!现在一切正常:) 我将导航栏代码写入 index.js,而不是使用组件。我将所有组件放在 Router 元素下方。这是我的 index.js 的最终代码:
import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import { Home } from './components/Home';
import { About } from './components/About';
import { Contact } from './components/Contact';
import { NoMatch } from './components/NoMatch';
import { Impressum } from './components/Impressum';
import { Datenschutzerklaerung } from './components/Datenschutzerklaerung';
import { Layout } from './components/Layout';
import { Jumbotron } from './components/Jumbotron';
import Footer from './components/Footer';
import './fontawesome';
import { Navbar, Nav } from "react-bootstrap";
import { withRouter } from "react-router";
const Header = props => {
const { location } = props;
return (
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Navbar.Brand >Filmmusic</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav activeKey={location.pathname} className="mr-auto">
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/about">About</Nav.Link>
<Nav.Link href="/contact">Contact</Nav.Link>
</Nav>
<Nav activeKey={location.pathname}>
<Nav.Link href="/impressum">Impressum</Nav.Link>
<Nav.Link href="/datenschutzerklaerung">Datenschutzerklärung</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
};
const HeaderWithRouter = withRouter(Header);
class MyHeader extends React.Component {
render() {
return (
<React.Fragment>
<Router>
<HeaderWithRouter />
<Jumbotron />
<Switch>
<Route exact path="/" component={Home} />
<Layout>
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route path="/impressum" component={Impressum} />
<Route path="/datenschutzerklaerung" component={Datenschutzerklaerung} />
</Layout>
<Route component={NoMatch} />
</Switch>
</Router>
<Footer />
</React.Fragment>
);
}
}
ReactDOM.render(<MyHeader />, document.getElementById('root'));
推荐阅读
- java - Java 反应式程序
- spring-boot - 如何在spring boot中通过POST方法读取url中的参数
- reactjs - 从 create-react-app (CRA) 转换为 CRA + Next.Js 应用
- javascript - 将子元素直接放置在父元素下方并向右对齐
- netty - Netty 4 中 DefualtChannelFuture 的替代品是什么
- python - 目录搜索返回的文件数不正确
- jq - jq 进行选择和包含的问题
- python - 来自导入模块的变量无法识别
- javascript - wProps 在反应开发工具中更新,但条件 jsx 无法正确呈现
- bash - 使用 wget 并行下载多个文件