Nextjs: Link-Element führt zu HydratationsfehlernJavaScript

Javascript-Forum
Guest
 Nextjs: Link-Element führt zu Hydratationsfehlern

Post by Guest »

Ich untersuche viele Hydratationsfehler auf meiner Seite, die anscheinend von meiner Migration im letzten Jahr von einer alten nächsten Version auf die aktuellste Version 15.x herrühren. Siehe Screenshots unten:

Code: Select all

Unhandled Runtime Error Expected server HTML to contain a matching  in .
und

Code: Select all

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
Was ich aus diesen Fehlern verstehe, ist: Das aktuelle HTML des Clients stimmt nicht mit dem überein, was wir auf der Clientseite vorberechnet haben.
was seltsam ist weil ich die Anweisung „use client“ in der Komponente verwendet habe.
Ich könnte all dies in einer Schaltflächenkomponente zusammenfassen, die eine next/link-Komponente verwendet. Deshalb habe ich es so weit wie möglich vereinfacht, aber egal, wie ich diese Komponente bearbeite, es werden Hydratationsfehler in der Konsole angezeigt. Ich habe verschiedene Möglichkeiten ohne Containerelement usw. ausprobiert:

Code: Select all

'use client'
import React from 'react'
import Link from 'next/link'

const ButtonComponent = function () {
return (

Button
)
}
export default ButtonComponent
Sobald ich jedoch next/link in dieser Situation entferne, sind alle Flüssigkeitsfehler behoben

Code: Select all

'use client'
import React from 'react'

const ButtonComponent = function () {
return (

Button
)
}
export default ButtonComponent
was ich nicht will – das sollte eine wiederverwendbare Schaltfläche sein, die untergeordnete Elemente und href als Requisiten abruft und untergeordnete Elemente rendert.
Wie löse ich das? Das? Habe ich eine falsche Vorstellung?
[
Image
]

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post