React-刷新后如何保持页面url

Question

在我的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"(的值是Products

Answer 1

您需要从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>)
}