Реагировать - как сохранить URL-адрес страницы после обновления?

Question

В моем приложении для реагирования я сохранил соответствующие имена страниц в локальном хранилище в зависимости от имени страницы, на которую щелкнули, т.е. для маршрута, скажем 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>)
}