如何在react bootstrap中管理活动导航选项卡，其中多个url突出显示同一选项卡?

Question

我使用react-bootstrap导航栏来处理我网站的导航。这是一个简单的导航栏。

const AppNavbar = () => {
const location = useLocation();
return (
<Navbar expand="lg" className="theme-navbar">
<Container>
<Navbar.Brand href="/">My Projects</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav activeKey={location.pathname} className="me-auto">
<Nav.Link href="/projects">Projects</Nav.Link>
<Nav.Link href="/work">Ongoing Tasks</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
};

我使用activeKey={location.pathname}来突出显示活动Nav.Link。但是，我希望当URL为'/'时，<Nav.Link href="/projects">Projects</Nav.Link>也被突出显示，因为我在两种情况下呈现相同的视图。

下面是路由的摘录，让它更清晰。

<Routes>
<Route path="/" element={<ProjectList />} />
<Route path="/projects" element={<ProjectList />} />
<Route path="/work" element={<InprogressTaskList />} />
<Route path="*" element={<NotFound />} />
</Routes>

react-bootstrap支持这个吗?

Answer 1

就在发布这个问题之后，我想到了答案，所以我把它写下来，以防有人可以使用。

解决方案基本上是控制activeKey值如下:

import { useLocation } from 'react-router-dom';
const AppNavbar = () => {
const location = useLocation();
const activeKey = location.pathname === '/' ? '/projects' : location.pathname;
return (
<Navbar expand="lg" className="theme-navbar">
<Container>
<Navbar.Brand href="/">My Projects</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav activeKey={activeKey} className="me-auto">
<Nav.Link href="/projects">Projects</Nav.Link>
<Nav.Link href="/work">Ongoing Tasks</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
};

另外，请注意，为了使导航。要使react-router正常工作(也就是说，它们在不触及服务器的情况下改变URL，并且仍然突出显示活动选项卡)，你需要使用以下命令:

import { Link, useLocation } from 'react-router-dom';
const AppNavbar = () => {
const location = useLocation();
const activeKey = location.pathname === '/' ? '/projects' : location.pathname;
return (
<Navbar expand="lg" className="theme-navbar">
<Container>
<Navbar.Brand as={Link} to="/">
Paint Projects
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav activeKey={activeKey} className="me-auto">
<Nav.Link as={Link} eventKey="/projects" to="/projects">
Projects
</Nav.Link>
<Nav.Link as={Link} eventKey="/work" to="/work">
Ongoing Tasks
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
};