React - 如何在刷新后保留页面 url?

React - How do i persist a page url after refresh?

在我的 React 应用程序中,我已根据点击的页面名称将相应的页面名称存储在本地存储中,即对于路线来说 http://localhost:3000/Products 我已存储名称 Products 每当我点击页面 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>)
}