Блог

Главная - Вопросы по программированию - Маршрутизатор реагирования: измените путь URL-адреса при возврате()

Маршрутизатор реагирования: измените путь URL-адреса при возврате()

#reactjs #react-router

Вопрос:

Есть запись в блоге /post/public/:postId , которая является общедоступной. На этой же странице есть кнопка редактирования, которая переходит на /edit/:postId страницу, где пользователь может изменить конфиденциальность публикации с общедоступной на частную.

После изменения сообщения с публичного на частное предыдущий URL /post/public/:postId -адрес становится недействительным, и /post/private/:postId мы можем видеть это сообщение по новому URL-адресу.

Но на странице редактирования, после изменения конфиденциальности (которая изменяет URL-адрес публикации), нажмите кнопку «Отмена this.props.history.goBack() «, чтобы вернуться к общедоступному URL-адресу, который теперь недействителен, следовательно, результат 404.

Есть ли способ обновить goBack() URL-адрес в зависимости от того, изменяет ли пользователь конфиденциальность? Я хочу, чтобы пользователи переходили по обновленному URL-адресу, когда конфиденциальность меняется с общедоступной на частную и наоборот.

P. s.: this.props.history.push() или this.props.history.replace() может временно устранить проблему, но если пользователь нажмет кнопку «Назад» браузера по умолчанию, он все равно вернется на недопустимую страницу.

Спасибо!

Ответ №1:

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

  • A -> > "/post/public/:postId" -> «редактировать» ->> replace("/edit/:postId")
  • A -> "/edit/:postId"

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

  • A -> > "/edit/:postId" -> «отмена» ->> goBack()
  • A

Если пользователь завершит и, предположительно, сохранит (или зафиксирует) редактирование, затем снова перенаправьте на правильный частный/общедоступный путь.

  • A -> > "/edit/:postId" -> «сохранить» ->> replace("/post/private/:postId")
  • A -> "/post/private/:postId"

Идея здесь состоит в том, чтобы сохранить стек истории действительным, не сохраняя потенциально «устаревшие» пути в истории.

Комментарии:

1. Просто хотел добавить один момент, когда пользователь нажимает кнопку «Отмена», он напрямую переходит на A страницу, и если A это коллекция или список сообщений в блоге, то другой задачей будет поддерживать положение прокрутки или разбиение на страницы и т. Д.

2. @Mitanshu Если вы спрашиваете, то да, это было бы то, что вы хотели бы сохранить, чтобы его можно было восстановить при переходе назад. Если вы просто информируете, да, звучит неплохо. 😀

Ответ №2:

     const [ locationKeys, setLocationKeys ] = useState([])
    const history = useHistory()

    useEffect(() => {
     return history.listen(location => {
      if (history.action === 'PUSH') {
       setLocationKeys([ location.key ])
      }

      if (history.action === 'POP') {
      if (locationKeys[1] === location.key) {
        setLocationKeys(([ _, ...keys ]) => keys)

        // Handle forward event

      } else {
        setLocationKeys((keys) => [ location.key, ...keys ])

        // Handle back event

      }
    }
  })}, [ locationKeys, ])

Это может вам помочь!

Метки: