[英]How to make an active navbar link when it shows its page using react-bootstrap
我正在使用 react bootstrap 並在我的投資組合應用程序的開發中做出反應,但是,我只需要添加一個小細節並且找不到正確的方法來做到這一點。
我需要使導航欄上的鏈接根據頁面切換顏色,例如,如果我在主頁上,導航欄上的“主頁”顏色應該不同,等等。
這是我需要完成我的代碼的最后一件事。
如果你想在這里查看整個存儲庫,它是: https://github.com/awadbilal/portfolio
這是我的導航欄代碼:
import React from "react";
import { Link } from "react-router-dom";
import { Container, Navbar, Nav, NavDropdown } from "react-bootstrap";
import { useTranslation } from "react-i18next";
import "./style.css";
function NavBar() {
const { t } = useTranslation();
// const { t, i18n } = useTranslation();
// const changeLanguage = () => {
// if (i18n.language === "en") i18n.changeLanguage("ar");
// else i18n.changeLanguage("en");
// };
return (
<>
<Navbar className="navBarSection mt-3" collapseOnSelect expand="lg">
<Container>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto pt-3 pb-3">
<Nav.Link eventKey={1}>
<Link to="/" className="underline">{t("nav.home")}</Link>
</Nav.Link>
<NavDropdown.Divider />
<Nav.Link eventKey={2}>
<Link to="/works" className="underline">{t("nav.works")}</Link>
</Nav.Link>
<NavDropdown.Divider />
<Nav.Link eventKey={3}>
<Link to="/education" className="underline">{t("nav.education")}</Link>
</Nav.Link>
<NavDropdown.Divider />
<Nav.Link eventKey={4}>
<Link to="/contact" className="underline">{t("nav.contact")}</Link>
</Nav.Link>
</Nav>
</Navbar.Collapse>
{/* <div className="languageButton" onClick={changeLanguage}>
{i18n.language === "en" ? "AR" : "EN"}
</div> */}
</Container>
</Navbar>
</>
);
}
export default NavBar;
這是它的外觀:
從 React Router 導入useLocation
鈎子,然后你可以創建一些動態類名:
// ...
import React, { useEffect, useState } from 'react';
// Import useLocation hook
import { Link, useLocation } from 'react-router-dom';
function NavBar() {
const location = useLocation(); // once ready it returns the 'window.location' object
const [url, setUrl] = useState(null);
useEffect(() => {
setUrl(location.pathname);
}, [location]);
// ...
return (
// ... Just a dumbed down example:
<Nav>
<Link to="/" className={"underline" + (url === "/" ?" active" : "")}>Home</Link>
<Link to="/projects" className={"underline" + (url === "/projects" ?" active" : "")}>Projects</Link>
<Link to="/contact" className={"underline" + (url === "/contact" ?" active" : "")}>Contact</Link>
</Nav>
);
}
等等。 對每個鏈接執行此操作並添加路徑名,它會按預期工作。
顯然,在您的 CSS 中,您需要創建一個 class 以顯示活動鏈接,例如:
.active {
color: red;
}
你可以這樣使用。
import React from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
class NavLink extends React.Component {
render() {
var isActive = this.context.router.route.location.pathname === this.props.to;
var className = isActive ? 'active' : '';
return(
<Link className={className} {...this.props}>
{this.props.children}
</Link>
);
}
}
NavLink.contextTypes = {
router: PropTypes.object
};
export default NavLink;
並在您的組件中使用它,如下所示:
...
import NavLink from "./nav_link";
.....
<nav>
<ul className="nav nav-pills pull-right">
<NavLink to="/">
<i className="glyphicon glyphicon-home"></i> <span>Home</span>
</NavLink>
<NavLink to="about">
<i className="glyphicon glyphicon-camera"></i> <span>About</span>
</NavLink>
</ul>
</nav>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.