yang sepadan dengan teg "，Saya sedang mengusahakan projek Next.js dan saya terus mendapat ralat penghidratan. Mesej ralat khusus yang saya lihat ialah: Ralat: Penghidratan gagal kerana UI awal tidak sepadan dengan apa yang diberikan apabila dipaparkan pada bahagian pelayan. Amaran: Menjangkakan padanan
terkandung dalam HTML pelayan. Saya faham ini mungkin disebabkan oleh ketidakpadanan antara HTML pemaparan sisi pelayan (SSR) dan HTML yang dijana oleh React semasa penghidratan pada bahagian klien. Gesaan amaran Dijangka menemui a"> Ralat penghidratan tindak balas dalam Next.js - "HTML pelayan dijangka mengandungi teg <a> yang sepadan dengan teg <a>"-Soal Jawab Rangkaian PHP Cina
简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Ralat penghidratan tindak balas dalam Next.js - "HTML pelayan dijangka mengandungi teg yang sepadan dengan teg "
P粉401901266
P粉401901266 2023-09-19 16:55:20
0
1
622

Saya sedang mengusahakan projek Next.js, tetapi saya terus mendapat ralat penghidratan. Mesej ralat khusus yang saya lihat ialah:

Ralat: Penghidratan gagal kerana UI awal tidak sepadan dengan apa yang dipaparkan apabila dipaparkan pada bahagian pelayan.

Amaran: Menjangkakan padanan

Saya faham ini mungkin disebabkan oleh ketidakpadanan antara HTML pemaparan sisi pelayan (SSR) dan HTML yang dijana oleh React semasa penghidratan pada bahagian klien. Amaran: Teg

dijangka dalam HTML yang diberikan pelayan, tetapi tidak ditemui.

import React from 'react'; import styled from 'styled-components'; import { FaIcon1 as Icon1, FaIcon2 as Icon2, FaIcon3 as Icon3, FaIcon4 as Icon4 } from 'react-icons/fa'; import Link from 'next/link'; const Container = styled.div` display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; background: #ffffff; `; const ListItemContainer = styled.div` display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 70%; overflow-y: auto; @media (min-width: 768px) { flex-direction: row; } `; const ListItem = styled.div` display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10px; margin: 10px 10px; font-size: 1.8em; border: 1px solid #299d51; border-radius: 5px; cursor: pointer; color: #14080e; transition: background 0.3s; width: 50vw; min-height: 20vh; text-align: center; &:hover { background: #4cb16b; } @media (min-width: 768px) { width: 20vw; } svg { color: #00722e; margin-bottom: 20px; } `; const Home: React.FC = () => { return (
       
        
         
          Item 1
         
         
          Item 2
         
         
          Item 3
         
         
          Item 4
         
        
       ); }; export default Home;

Bagaimana untuk membetulkan ralat ini dalam NextJS 13?

P粉401901266
P粉401901266

membalas semua (1)
P粉129275658
P粉1292756582023-09-20 15:06:12 Tingkat 1

Masalah ini disebabkan oleh komponen Next.js. Saya membetulkannya dengan menggantikan komponen dengan teg standard:

   项目1

Ini memaksa muat semula halaman penuh apabila pautan diklik, dan bukannya mendayakan navigasi sisi klien seperti yang dilakukan oleh komponen ini. Sila ambil perhatian bahawa ini adalah penyelesaian dan mungkin memberi kesan kepada prestasi disebabkan pemuatan semula halaman.

Suka+0
Tambah Balasan
    Topik popular
    Lagi>
    Artikel popular
    Tutorial Popular
    Lagi>
    Tutorial berkaitan
    Cadangan popular
    Kursus terkini
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan
    Tentang kita Penafian Sitemap
    Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！