在我的 react 应用程序中,我已根据单击的页面名称将相应的页面名称存储在本地存储中,即对于路线来说 http://localhost:3000/Products
我已经存储了每当我点击页面产品时,都会在本地存储中命名产品。
我希望每当我刷新页面时,我的页面不会被重定向到主页 /
,而是通过确认本地存储中的值来保留在我所在的页面上。
我的方法行不通。
<NavLink to="/localStorage.getItem("selectedItem")" style={{ textDecoration: "none" }}>
<MenuItemComponent
title="Products"
icon={IconProducts}
onClick={() => this.onItemClicked("Products")}
active={localStorage.getItem("selectedItem") === "Products"}
/>
</NavLink>
从上面的代码中,我希望页面将我引导至 http://localhost:3000/Products
,因为 localStorage.getItem("selectedItem") 的值 是产品
最佳答案
您需要从 LocalStorage 获取值,但您使用的是纯字符串。应该是这样的:
const AppNaVLink = () => {
const link = `/${localStorage.getItem("selectedItem") ?? ''}`
return (
<NavLink to={link} style={{ textDecoration: "none" }}>
<MenuItemComponent
title="Products"
icon={IconProducts}
onClick={() => this.onItemClicked("Products")}
active={localStorage.getItem("selectedItem") === "Products"}
/>
</NavLink>)
}
关于javascript - React - 如何在刷新后保留页面 URL?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63146786/