Как вернуться на предыдущую страницу в next js с помощью next/маршрутизатора?

#reactjs #next.js #next-router

Вопрос:

Я использую next js для своего приложения, и у меня возникли некоторые проблемы с маршрутизацией на предыдущий маршрут приложения. Я знаю о функции маршрутизатора back (), которая похожа на window.history.back (), я хотел бы вернуться к маршруту при нажатии на ссылку, и если предыдущая ссылка не из моего приложения или равна нулю, я хотел бы перейти на домашнюю страницу по умолчанию.

Я использовал такие библиотеки, как react-router-last-location для своего приложения react, но я хочу посмотреть, есть ли лучшие способы сделать это в next js через next/router.

Вот мой пример кода:

 <div className={styles['icon-container']}>
  <Link  href="/"><a>
     <img src="icon.svg"></img>
  </a></Link>
</div>

если я использую router.back() при вводе ссылки, страница автоматически возвращается еще до ее загрузки, как мне решить эту проблему?

1. Не могли бы вы добавить дополнительную информацию о случае использования, т. е. о том, почему вы хотите это сделать. Это поможет людям дать более полные ответы. 🙂

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

3. Нет, я не похищаю заднюю навигацию! Это пользовательская кнопка «Назад», которая будет присутствовать на моем сайте, чтобы они могли просмотреть сообщение и вернуться в ленту!

Ответ №1:

<Link> не могу выйти за пределы вашего приложения. (но router.back() может)

Вы не можете использовать router.back() непосредственно в коде, вам нужно сделать что-то вроде :

 <img onClick={() => router.back()} src="icon.svg" />

<Link> не имеет свойства onClick.

 import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()

  return (
    <button type="button" onClick={() => router.back()}>
      Click here to go back
    </button>
  )
}

Источник информации здесь

1. Как этот код предотвращает обратную навигацию из приложения и перенаправляет на домашнюю страницу вместо этого?

2. На самом деле не знаю, с маршрутизатором вы не можете этого сделать. Вам нужно проверить .sessionStorage или .localstorage