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”）的值是产品 < / p>

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>)
}

反应-刷新后如何保留页面网址？

1 个答案: