Хук useLocation сохраняет состояния даже при жестком обновлении
Во время работы над проектом я заметил странное поведение хука useLocation, которому не могу найти объяснения.
У меня есть кнопка, которая при нажатии перенаправит вас на страницу EditOrder и передаст ей состояние:
const navigate = useNavigate();
const handleClick = (data) => {
navigate("edit-order", {state: {order: data}})
};
На странице EditOrder я проверяю с помощью хука UseEffect, был ли предоставлен state, и если нет, пользователь будет перенаправлен на другую страницу:
const { state } = useLocation();
const navigate = useNavigate();
useEffect(() => {
if (!state) {
navigate("some-page");
}
}, []);
Странная часть заключается в том, что когда я обновляю страницу, я все еще могу получить к ней доступ, и если я console.info(state.order) данные все еще там, даже когда я перезагружаюсь с помощью ctrl + shift + r, состояние остается прежним, и это также происходит с empty cache and hard reload option (пробовали как в Chrome, так и в край).
Но когда я копирую URL-адрес и вставляю его на новую вкладку, я сразу же перенаправляюсь на «какую-то страницу».
и console.info(state) покажет null.
Я проверил и файлы cookie, и локальное хранилище, и я не могу найти там данные о состоянии.
Может кто-нибудь объяснить, почему это происходит и как сохраняются данные о состоянии?
Редактировать:
Вот YouTube видео, который показывает это поведение.
Код на видео можно найти в эта песочница, при запуске кода на песочнице он работает как надо, при рефреше все состояния сбрасываются, а вот при локальном запуске такая проблема (на 2-х разных компах).
Я создал ящик для отправки, но не могу воспроизвести эту проблему, однако, когда я копирую эту песочницу на свой компьютер и запускаю ее локально, возникает проблема codeandbox.io/s/…
Я не могу воспроизвести проблему и вижу такое же поведение в CSB, как и при запуске кода в новом окне. После перехода к "/page2" я вижу зарегистрированный объект, и после перезагрузки страницы объект становится нулевым, и пользовательский интерфейс перенаправляется обратно на "/". То же самое происходит при переходе вручную к "/page2". Это то, что я ожидаю от поведения.
Даже когда вы запускаете его на локальном компьютере? Я запущу код на своем втором компьютере и обновлю, если это все еще произойдет.
Итак, я только что загрузил код из песочницы на свой второй компьютер, и это все еще происходит как в Chrome, так и в Edge ... Я обновлю вопрос со всей этой новой информацией.
Просто чтобы мы были на одной странице о том, что вы подразумеваете под «запустить его на локальном компьютере», можете ли вы уточнить, что именно это означает? Код в CSB выполняется локально на моей машине в браузере.
Я имел в виду, что скачал код на свой компьютер и запустил его с помощью npm start
Итак, я также скачал код песочницы и запустил его локально. Любопытно, что я могу воспроизвести «проблему» сохранения состояния при перезагрузке страницы. Я думал, может быть, это RRDv6, поэтому попробовал v5 и снова перепрошил. Затем я попробовал Safari (по сравнению с Chrome) и снова воспроизвел. Поиск проблем в репо и нашел этот проблема и был удивлен, обнаружив, что состояние должно сохраняться при перезагрузке. Я подозреваю, что код, работающий в песочнице, работает по-другому, поскольку он находится в iframe.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
UseLocation основан React на библиотека истории, который использует BrowserHistory в веб-приложениях.
Некоторые браузеры, как и Chrome, сохраняет BrowserHistory состояние между сеансами, в то время как другие (например, Firefox) этого не делают.
Вероятно, поэтому вы видите такое поведение локально, а не в песочнице. Похоже, что браузер CodeSandbox очищает состояние истории при обновлении. По этой же причине, если вы скопируете URL-адрес на другую вкладку, перенаправление сработает. BrowserHistory является локальным для одной вкладки.
Короче говоря, это предполагаемое поведение. Либо вам нужно очистить состояние истории вручную, либо сохранить состояние вашего приложения в другом месте (useContext может быть хорошим выбором, если вы хотите сохраняться на разных страницах, но нет при обновлении).
Странное поведение... как вы думаете, вы могли бы создать демонстрацию Бег codeandbox, которая воспроизводит эту проблему, которую мы могли бы проверить и отладить вживую?