我对layout.tsx做了一些修改，如下所示。不能使用下一个路由器，因为不能在服务器组件中使用它。我不得不注解掉元数据，我不想只是忽略服务器组件错误
'use client'
import { hydrateRoot } from 'react-dom/client';
import { usePathname, useSearchParams } from 'next/navigation'
import './globals.css'
import { Inter } from 'next/font/google'
import MainHeader from './layout/main-header'
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 pathname = usePathname()
const searchParams = useSearchParams()
const excludeHeader = pathname.startsWith('/admin')
return (
<html lang="en">
{!excludeHeader && <MainHeader />}
<body className={inter.className}>{children}</body>
</html>
)
}具有跟随误差
expected server HTML to contain a matching <header> in <html>.
at header
at MainHeader (webpack-internal:///(app-client)/./app/layout/main-header.jsx:21:80)
at html
at RootLayout (webpack-internal:///(app-client)/./app/layout.tsx:23:11)
at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
at NotFoundErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:33:9)
at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:40:11)
at ReactDevOverlay (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
at HotReload (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:276:11)
at Router (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:90:11)
at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:62:9)
at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:87:11)
at AppRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:372:13)
at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:154:11)
at RSCComponent
at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:171:11)
w头组件如下，我不认为它有任何关系的错误。
import { Fragment } from "react";
import Link from "next/link";
import React, { useState } from "react";
// import { NavLink, Link } from "react-router-dom";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import ModalLogin from "../components/Login";
import {
faMagnifyingGlass,
faBars,
faTimes,
} from "@fortawesome/free-solid-svg-icons";
function MainHeader() {
const [isOpen, setIsOpen] = useState(false);
const [showModal, setShowModal] = useState(false);
const handleShowModal = () => {
setShowModal(true);
};
const handleCloseModal = () => {
setShowModal(false);
};
const toggleMenu = () => {
setIsOpen(!isOpen);
};
return (
<Fragment>
<header className="border-b md:flex md:items-center md:justify-between p-4 pb-0 shadow-lg md:pb-4">
{/* Logo text or image */}
<div className="flex items-center justify-between mb-4 md:mb-0">
<h1 className="leading-none text-2xl text-grey-darkest">
<Link
href="/"
className="no-underline text-grey-darkest hover:text-black"
>
Preview
</Link>
</h1>
<button
className="text-black hover:text-orange md:hidden"
onClick={toggleMenu}
>
<FontAwesomeIcon icon={isOpen ? faTimes : faBars} />
</button>
</div>
{/* END Logo text or image */}
{/* nav*/}
<nav className={`md:block ${isOpen ? "block" : "hidden"}`}>
<ul className="list-reset md:flex md:items-center">
<li className="md:ml-4">
<Link
className="block no-underline hover:underline py-2 text-grey-darkest hover:text-black md:border-none md:p-0"
href="/"
>
Home
</Link>
</li>
<li className="md:ml-4">
<Link
className="border-t block no-underline hover:underline py-2 text-grey-darkest hover:text-black md:border-none md:p-0"
href="/category"
>
Category
</Link>
</li>
<li className="md:ml-4">
<Link
className="border-t block no-underline hover:underline py-2 text-grey-darkest hover:text-black md:border-none md:p-0"
href="/product"
>
products
</Link>
</li>
{/* <li className="md:ml-4">
<Link
className="border-t block no-underline hover:underline py-2 text-grey-darkest hover:text-black md:border-none md:p-0"
href="/blog"
>
Blog
</Link>
</li> */}
<li className="md:ml-4">
<Link
className="border-t block no-underline hover:underline py-2 text-grey-darkest hover:text-black md:border-none md:p-0"
href="/about"
>
About
</Link>
</li>
<li className="md:ml-4">
<div>
<button onClick={handleShowModal}>Login</button>
{showModal && <ModalLogin onClose={handleCloseModal} />}
</div>
</li>
</ul>
</nav>
{/* END Search field */}
{/* search */}
<button
type="button"
className=" bg-purple-800 hover:bg-purple-900 focus:ring-4 focus:outline-none focus:bg-purple-300 font-medium text-white text-sm px-4 py-2 text-center dark:bg-purple-300 dark:hover:bg-purple-600 dark:focus:bg-purple-900"
>
<Link href="/add-product"> Add a Product </Link>
</button>
{/* <form className="mb-4 md:mb-0 md:w-1/4">
<label className="hidden" htmlFor="search-form">Search</label>
<input className="bg-grey-lightest border-2 focus:border-orange p-2 rounded-lg shadow-inner w-full" placeholder="Search" type="text" />
<button className="hidden">Submit</button>
</form> */}
{/* END Global navigation */}
</header>
</Fragment>
);
}
export default MainHeader;
1条答案
按热度按时间zdwk9cvp1#
您正在尝试在
html标记中添加header标记。这是不允许的，请参阅MDN html docs。您应该将header添加到body。