Как проверить history в react-router-dom (v5) на пустоту?

Question

[lexstile]

Например, в коде я использую goBack, чтобы вернуться на предыдущую страницу:

const history = useHistory();
history.goBack();

Но если пользователь зайдет по прямому URL, еще нет истории переходов, которую мы создаем через history.push(). В этом случае хочется иметь запасной вариант (Сейчас, как я понял, роутер наш шлет на главную).

То есть, как проверить, что в истории переходов нет? (пользователь зашел по прямому URL)

Comments

[szQocks]

...

[lexstile]

szQocks, обновил, что нужен v5

[szQocks]

lexstile, а туплю, тебе же вообще на какую-то пустоту надо проверить, ну как вариант можешь вывести history свою переменную в консоль лог, и посмотреть что там обновляется при изменении роутов и отслеживать это поле, так сказать методом тыка

скорее всего там будет наверное поле какое-то типа prevPage или что-то похожее может, и его просто смотришь и всё

Answer 1

[Артем]

Для проверки, есть ли записи в history, можно использовать свойство length. Если значение length равно 1, то это означает, что в history нет предыдущей страницы, и пользователь зашел по прямому URL.

Вот как можно проверить history на пустоту:

import { useHistory } from 'react-router-dom';

function MyComponent() {
  const history = useHistory();

  function goBack() {
    if (history.length > 1) {
      history.goBack();
    } else {
      // обработка случая, когда history пуста
      // например, переход на главную страницу
      history.push('/');
    }
  }

  return (
    <div>
      <button onClick={goBack}>Назад</button>
    </div>
  );
}

Этот код проверяет length свойство history, и если оно больше 1, то вызывает goBack(), чтобы вернуться на предыдущую страницу. Если length равно 1, то пользователь зашел по прямому URL, и код выполняет альтернативное действие (в данном случае, переход на главную страницу)

Comments

[lexstile]

спасибо большое!
Но length, как я понял не сбрасывается при обновлении страницы, верно?
Если только самый-самый первый раз зашел? (у меня оно при полном обновлении страницы равно 50+)

[Артем]

lexstile,
https://v5.reactrouter.com/web/api/history

[Артем]

lexstile, Значение length у объекта history сохраняется даже после обновления страницы или перезапуска браузера. Это означает, что если пользователь заходит на ваш сайт в первый раз и переходит на несколько страниц, то length будет увеличиваться на каждый переход и сохраняться в истории браузера. Если пользователь затем обновляет страницу, length не будет сбрасываться, и он все еще будет содержать предыдущие записи в истории переходов.

Вы также можете проверить последнее действие в истории, чтобы определить, был ли пользователь на других страницах до текущей. Для этого можно использовать свойство action объекта history.

Свойство action показывает тип действия, приведшего к текущей записи в истории. Допустимые значения для action - это "PUSH" (когда пользователь перешел на новую страницу), "REPLACE" (когда был выполнен заменяющий переход на страницу) и "POP" (когда пользователь нажал на кнопку "назад" в браузере и вернулся на предыдущую страницу).

Вот пример использования свойства action, чтобы проверить, был ли пользователь на других страницах до текущей:

import { useHistory } from "react-router-dom";

function MyComponent() {
  const history = useHistory();

  function handleGoBack() {
    const lastAction = history.action;
    if (lastAction === "POP") {
      console.log("Вы находитесь на первой странице");
    } else {
      history.goBack();
    }
  }

  return (
    <div>
      <button onClick={handleGoBack}>Назад</button>
    </div>
  );
}

В этом примере мы проверяем, было ли последнее действие пользователя "POP" (то есть, он только что вернулся на страницу с помощью кнопки "назад" в браузере). Если это так, мы рассматриваем это как ситуацию, когда пользователь находится на первой странице, и выводим сообщение об этом в консоль. Если последнее действие было не "POP", то мы используем goBack() для перехода на предыдущую страницу

[lexstile]

Артем, очень подробно, спасибо большое!!!