Как запретить переходы на предыдущие страницы в React?

Question

[jslby]

Здравствуйте. Есть роутер, в котором человек заполняет свою анкету.
Выглядит примерно так:

/
/main-info
/job-info
/personal-info
/contact-info

Мне необходимо сделать так, что бы когда пользователь заходит на сайт, его автоматически перенаправляло на последнюю страницу, где он остановился, т.е.:
Если пользователь с главной страницы перешел на /main-info и закрыл сайт, то когда он вернется он должен снова попасть на /main-info - это реализовать не сложно, можно хранить роут в локалсторейдж, но вот еще одно условие:
Если пользователь снова захочет зайти на главную, его перебросит на /main-info

Если он с /main-info перейдет на /job-info - то он ни при каких обстоятельствах не сможет попасть ни на главную, ни на /main-info
Его просто должно перебрасывать
Естественно защиты от Инкогнито и смены бразуера/компьютера это не поможет, но мне очень нужна реализация без этих исключений, т.е. пользователь сидит в одном и том же браузере и без Инкогнито

Answer 1

[Антон Спирин]

if (storagePath && location.pathname !== storagePath) {
  return <Redirect to={storagePath} />;
}

return (
  <Switch>
    // routes
  </Switch>
);

Перед переходом на следующую страницу анкеты надо обновлять storagePath, а по завершению заполнения удалять.

Comments

[jslby]

Да, но например если пользователь нажмет назад в браузере это не поможет. Может быть возможно создать какой то массив с индексами, записывать индекс в стор, и каким то образом отлавливать и сравнивать. Если текущая страница меньше чем та что в сторе, редиректить на ту что в сторе. Я алгоритм понимаю, но не знаю как его реализовать.

[jslby]

Может быть хранить в сторе массив всех посещенных страниц и проверять вхождение текущей? Если есть - редирект на последнюю в массиве, если нет - добавить

[Антон Спирин]

jslby, это вообще не проблема. При клике "Назад", если до этого был переход внутри приложения(Link, Redirect, history), инициируется перерисовка древа точно так же, как если бы вы перешли по ссылке роутера. Пользователь нажмет "Назад" и если существует storagePath останется на той же странице.
Другое дело если вы хотите разрешить переход назад. Но эта проблема тоже достаточно легко решается.

Answer 2

[Robur]

Поставьте редирект, который будет проверять, на каком шаге пользователь был в прошлый раз и отправлять его туда.
Его можно поставить или на каждую страницу или один глобальный который рендерится выше по дереву чем все эти страницы.

Comments

[jslby]

Это выход если страниц всего 3-5, но у меня их порядка 25, и возможно будут пополняться, вот и думал сделать что то универсально, а не перечислять все страницы в массиве

[Robur]

вам в любом случае надо будет все эти страницы где-то перечислить и знать их порядок. Или это будет массив или JSX в рендер-функции. сделайте массив и его используйте и для рендера и для проверки.