导航菜单活动元素和状态管理问题

Question

我正在尝试为当前页面显示一个活动的<Nav.Link> 元素，但是当我在页面之间转到默认值时它会不断重置。每个链接都指向我在 React-Router 中定义的不同路由。我正在尝试使用 jotai 进行状态管理来存储当前页面的值，但无法获得要显示的正确值。

例如，下面的代码有药丸来显示导航中的活动选择。即使我转到不同的页面，我也希望能够做到这一点，因为这是导航菜单。

import Nav from 'react-bootstrap/Nav';

function TabsExample() {
  return (
    <Nav variant="pills" defaultActiveKey="/home">
      <Nav.Item>
        <Nav.Link href="/home">Active</Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link eventKey="link-1">Option 2</Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link eventKey="disabled" disabled>
          Disabled
        </Nav.Link>
      </Nav.Item>
    </Nav>
  );
}

export default TabsExample;

但是，我相信每当我转到不同的页面时，出于某种原因，我的页面都会重新渲染/重新加载（短暂变白）。

可能有一些我没有得到的东西，所以请告诉我。

Answer 1

这里的问题很可能是 Nav.Link 组件默认呈现一个锚点 <a> 元素，这会导致在您单击链接时重新加载页面。您可以指定每个Nav.Link 来呈现NavLink (或Link) 从react-router-dom 导出的组件，以便RRD 现在可以正确处理单击链接。指定to 属性而不是href 属性，并设置eventKey 属性以匹配链接目标，这样“药丸”状态也可以正常工作。

例子：

import { NavLink } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import Nav from "react-bootstrap/Nav";

function PillsExample() {
  return (
    <Nav variant="pills">
      <Nav.Item>
        <Nav.Link as={NavLink} end to="/" eventKey="/"> // * Note on end prop
          Home
        </Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link as={NavLink} to="/foo" eventKey="/foo">
          Foo
        </Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link as={NavLink} to="/bar" eventKey="/bar">
          Bar
        </Nav.Link>
      </Nav.Item>
    </Nav>
  );
}

* 笔记：如果使用了 end 属性，它将确保在匹配其后代路径时该组件不会被匹配为“活动”。有关更多组件详细信息，请参阅NavLink。