时间戳

首页 > 解决方案 > 侧边栏未更新反应路由器中的手动 URL 路由更改

reactjs - 侧边栏未更新反应路由器中的手动 URL 路由更改

问题描述

我正在使用带有反应路由器的仪表板的 create-react-app 应用程序。当我单击侧边栏项目时，它导航到相关页面并且工作正常。但是如果我手动将 URL 更改为另一个页面，则与该页面相关的侧边栏菜单项不会突出显示。

我在菜单项单击时将当前路径路径保存为全局状态。在Menu组件中我通过访问全局状态获得当前选择的路由之后，我将其传递给selectedKeys以便在单击菜单项时菜单项会突出显示。它工作正常。但是，如果我从浏览器 URL 栏中更新路径，页面将正确呈现，但侧边栏项目未突出显示。

我想要的是一种识别浏览器中手动 URL 更改并在其上运行功能的方法。这样我就可以使用设置当前路径localStorage.getItem

<SideBar>
  <Menu selectedKeys={[localStorage.getItem("dashboardRoutes")] || "/dashboard"}>
    {routes.map(route => (
      <Menu.Item
       onClick={() =>
           localStorage.setItem(route.path)
       }>
         {route.name}
      </Menu.Item>
    ))}
  </Menu>
</SideBar>

标签： reactjsreact-router

解决方案

如果您希望在硬刷新后通过 URL 更新您的页面，您必须从useParams钩子中捕获值（slug、id 等，无论它是什么）。然后在一个useEffect只在应用程序加载时运行一次的钩子中（这意味着您需要传递一个空数组作为依赖项），手动处理初始突出显示。

如果您将代码添加到侧边栏组件中，我可能会提供更好的帮助。

推荐阅读