使用下一个js 13.4.4与src文件夹.布局只在我的索引页上工作。我的结构是：
src/app/layout.tsx
'use client';
import './globals.css'
import { Inter } from 'next/font/google'
import Navbar from '../components/Navbar/Navbar';
import Signup from '../components/Modals/Signup';
import React, { useState } from 'react';
const inter = Inter({ subsets: ['latin'] })
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
const [isModalOpen, setIsModalOpen] = useState(false);
const handleRegisterClick = () => {
setIsModalOpen(true);
};
const handleCloseModal = () => {
setIsModalOpen(false);
};
return (
<html lang="en">
<body className={inter.className}>
<Navbar toggleRegister={handleRegisterClick} />
<Signup isOpen={isModalOpen} onClose={handleCloseModal} />
{children}
<div modal-backdrop="" className="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40" style={{display: isModalOpen ? '' :'none'}}></div>
</body>
</html>
)
}src/page/calendar.tsx
function calendar() {
return (
<main>
my calednar
</main>
);
}
export default calendar;我的索引页src/app/page.tsx工作正常.为什么calendar.tsx显示一个错误：
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching <html> in <div>.
See more info here: https://nextjs.org/docs/messages/react-hydration-error我不知道如何摆脱它。谢谢你的帮助
1条答案
按热度按时间vdzxcuhz1#
下一个js 13.4使应用程序路由器稳定。你应该把
calendar放在app/calender/page.tsx中。从我的测试来看，这样做可以解决这个问题。