如何在React Bootstrap中实现多URL高亮同一导航标签？

React-Bootstrap本身没有直接提供多路径映射到同一导航项的配置，但可以通过两种简单方式实现你的需求：

方法一：自定义activeKey逻辑 #

在Navbar组件中，根据当前路径动态设置activeKey，当路径为"/"时，将激活键指定为"/projects"，这样就能让Projects导航项高亮：

const AppNavbar = () => {
  const location = useLocation();
  // 自定义激活键：路径为"/"时关联"/projects"导航项
  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>
  );
};

这种方式保留了"/"路径的访问，同时让对应的导航项正常高亮。

方法二：路由重定向 #

如果允许将"/"路径重定向到"/projects"，可以直接修改路由配置，让URL统一为"/projects"，自然匹配对应的导航项：

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

replace属性会替换历史记录中的"/"条目，避免用户点击返回按钮回到空路径。

内容的提问来源于stack exchange，提问作者kiril