Как правильно ориентироваться в nextjs

idk это довольно просто или что, но с трудом понимаю это. вот один родительский div, обернутый тегом nextjs Link (который направляет меня к маршруту /playing), и в этом div у меня есть еще один тег, который может направить меня на страницу входа. вот проблема, когда я нажимаю на логин, он переходит на первую страницу /playing, а затем направляет меня на /login, как правильно ее решить. я хочу перейти к /playing, щелкнув весь div и

  <Link href="/playing">
        <div className="px-20 w-full">
          <h1 onClick={() => router.push(`/login`)} className="hover:underline">
            Login
          </h1>
        </div>
      </Link>
Шаблоны Angular PrimeNg
Шаблоны Angular PrimeNg
Как привнести проверку типов в наши шаблоны Angular, использующие компоненты библиотеки PrimeNg, и настроить их отображение с помощью встроенной...
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
Документирование API с помощью Swagger на Springboot
Документирование API с помощью Swagger на Springboot
В предыдущей статье мы уже узнали, как создать Rest API с помощью Springboot и MySql .
Начала с розового дизайна
Начала с розового дизайна
Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских...
Шлюз в PHP
Шлюз в PHP
API-шлюз (AG) - это сервер, который действует как единая точка входа для набора микросервисов.
14 Задание: Типы данных и структуры данных Python для DevOps
14 Задание: Типы данных и структуры данных Python для DevOps
проверить тип данных используемой переменной, мы можем просто написать: your_variable=100
0
0
68
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Эта проблема вызвана propagation или event bubbling. прочитайте event action в javascript для получения дополнительной информации. Но в своем разделе нужно избегать распространения кликов. попробуй это :

  <Link href="/playing">
        <div className="px-20 w-full">
          <h1 onClick={(event) => {
           event.stopPropagation();
           router.push(`/login`);
         }} 
         className="hover:underline">
            Login
          </h1>
        </div>
  </Link>

если этот образец не работает. поиск о всплытии событий

Другие вопросы по теме

Похожие вопросы

Не показывать список файлов в antd-Upload, если URL-адрес пуст
Получение «FirebaseError: Firebase: необходимо предоставить параметры, если они не развернуты на хостинге через источник. (приложение/без параметров).' при инициализации firebase
Высота сетки попутного ветра
FirebaseError: Firebase: ошибка (auth/invalid-api-key) во время развертывания Netlify
Как работать, чтобы прокрутить вверх с помощью owerflow-y-auto? (в Nextjs)
Какой был бы идеальный подход к выборке для большой страницы блога NextJS для отличной производительности и SEO?
Как мне воспользоваться преимуществами рендеринга Next.js на стороне сервера при активном использовании хуков React?
Ошибка сервера с next.js — FetchError: не удалось выполнить запрос к https://jsonkeeper.com/b/4G1G.
Получите локальный JSON и отобразите список в Next.js. Свойство «данные» не существует для типа String
Невозможно использовать функцию Object.values ​​с объектом в TypeScript