提问人：Shivanshu Bhashkar 提问时间：11/8/2023 最后编辑：Shivanshu Bhashkar 更新时间：11/8/2023 访问量：32
下一个 .js 链接组件错误：失败的道具类型：道具“href”需要“字符串”或“对象”，但得到“未定义”
Next.js Link Component Error: Failed prop type: The prop `href` expects a `string` or `object`, but got `undefined`
问：
描述：
我在与组件相关的 Next.js 项目中遇到错误。我已经查看了我的代码并尝试了各种解决方案，但我仍然无法解决问题。Link
代码：
布局.js
import Image from "next/image";
import { useSession, signIn, signOut } from "next-auth/react";
import { useState } from "react";
import { useRouter } from "next/router";
import Nav from "@/components/Navbar";
import { Dialog } from "@headlessui/react";
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
import {ChatBubbleLeftRightIcon} from "@heroicons/react/24/outline";
import Head from "next/head";
import Link from "next/link";
import { CurrencyRupeeIcon } from "@heroicons/react/24/outline";
import { ShoppingBagIcon } from "@heroicons/react/24/outline";
import { UserGroupIcon } from "@heroicons/react/24/outline";
import React, { useEffect } from 'react';
import { LockClosedIcon } from "@heroicons/react/24/outline";
import { FireIcon } from "@heroicons/react/24/outline";
const navigation = [
{ name: "", href: "#" },
{ name: "", href: "#" },
{ name: "", href: "#" },
];
const features = [
//data
];
const people = [
//data
];
const links = [
//data
];
const stats = [
//data
];
export default function Layout({ children }) {
const [showNav, setShowNav] = useState(false);
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const router = useRouter();
const { data: session } = useSession();
async function logout() {
await router.push("/");
await signOut();
}
if (!session) {
return (
<div className="bg-white">
<Head>
<title>Prakriti Bazaar</title>
</Head>
<header className="absolute inset-x-0 top-0 z-50">
<nav
className="flex items-center justify-between p-6 lg:px-8"
aria-label="Global"
>
<div className="flex lg:flex-1">
<Link href="#" className="-m-1.5 p-1.5">
<span className="sr-only">Prakriti Bazaar</span>
<Image
className="h-10 w-auto"
src="/logo.png"
alt=""
width={1000}
height={1000}
/>
</Link>
</div>
<div className="flex lg:hidden">
<button
type="button"
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
onClick={() => setMobileMenuOpen(true)}
>
<span className="sr-only">Open main menu</span>
<Bars3Icon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
<div className="hidden lg:flex lg:gap-x-12">
{navigation.map((item) => (
<Link
key={item.name}
href={item.href}
className="text-sm font-semibold leading-6 text-gray-900"
>
{item.name}
</Link>
))}
</div>
<div className="hidden lg:flex lg:flex-1 lg:justify-end">
<Link
href="/api/auth/signin"
className="text-sm font-semibold leading-6 text-gray-900"
>
Log in <span aria-hidden="true">→</span>
</Link>
</div>
</nav>
<Dialog
as="div"
className="lg:hidden"
open={mobileMenuOpen}
onClose={setMobileMenuOpen}
>
<div className="fixed inset-0 z-50" />
<Dialog.Panel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
<div className="flex lg:flex-1">
<Link href="/" className="-m-1.5 p-1.5">
<span className="sr-only">Prakriti Bazaar</span>
<Image
className="h-10 w-auto"
src="/logo.png"
alt=""
width={1000}
height={1000}
/>
</Link>
<button
type="button"
className="-m-2.5 rounded-md p-2.5 text-gray-700"
onClick={() => setMobileMenuOpen(false)}
>
<span className="sr-only">Close menu</span>
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
<div className="mt-6 flow-root">
<div className="-my-6 divide-y divide-gray-500/10">
<div className="space-y-2 py-6">
{navigation.map((item) => (
<Link
key={item.name}
href={item.href}
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
>
{item.name}
</Link>
))}
</div>
<div className="py-6">
<Link
href="/api/auth/signin"
className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
>
Log in
</Link>
</div>
</div>
</div>
</Dialog.Panel>
</Dialog>
</header>
<div className="relative isolate px-6 pt-14 lg:px-8">
<div
className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
aria-hidden="true"
>
<div
className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#80ff95] to-[#89fc92] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
style={{
clipPath:
"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
}}
/>
</div>
<div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
<div className="hidden sm:mb-8 sm:flex sm:justify-center">
<div className="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
Cultivating Harmony 💚️
</div>
</div>
<div className="text-center">
<h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
Welcome to Prakriti Bazaar!!
</h1>
<p className="mt-6 text-lg leading-8 text-gray-600">
From Fields to Festivities
</p>
<div className="mt-10 flex items-center justify-center gap-x-6">
<Link
href="/api/auth/signin"
className="rounded-md bg-green-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
>
Get started
</Link>
</div>
</div>
</div>
<div
className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
aria-hidden="true"
>
<div
className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#80ff95] to-[#89fc92] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
style={{
clipPath:
"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
}}
/>
</div>
</div>
<div className="bg-white py-24 sm:py-32">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-2xl lg:text-center">
<h2 className="text-base font-semibold leading-7 text-green-600">
Discover the Exciting Features of
</h2>
<p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Your Urban Agriculture Hub
</p>
<p className="mt-6 text-lg leading-8 text-gray-600">
PrakritiBazaar is a vibrant online marketplace dedicated to urban agriculture and sustainable living. We believe in bringing the bounty of nature closer to urban dwellers, fostering a deeper connection with the environment. Whether you are a seasoned gardener or just starting out, PrakritiBazaar provides a platform to explore, buy, and sell a wide array of agricultural products right from the heart of the city.
</p>
</div>
<div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
<dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
{features.map((feature) => (
<div key={feature.name} className="relative pl-16">
<dt className="text-base font-semibold leading-7 text-gray-900">
<div className="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-green-600">
<feature.icon
className="h-6 w-6 text-white"
aria-hidden="true"
/>
</div>
{feature.name}
</dt>
<dd className="mt-2 text-base leading-7 text-gray-600">
{feature.description}
</dd>
</div>
))}
</dl>
</div>
</div>
</div>
<div className="bg-white py-24 sm:py-32">
<div className="mx-auto grid max-w-7xl gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
<div className="max-w-2xl">
<h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Meet our dynamic leaders at PrakritiBazaar
</h2>
<p className="mt-6 text-lg leading-8 text-gray-600">
where Shivanshu, our skilled Full-Stack Web Developer, has brought our website to life with seamless functionality and beautiful design, while Archit, our talented Video Editor and Graphic Designer, has shaped our visual identity through a distinctive logo and informative tutorials. Together, they spearhead our mission to empower urban gardeners and enthusiasts in creating a greener, more sustainable urban lifestyle.
</p>
</div>
<ul
role="list"
className="grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2"
>
{people.map((person) => (
<li key={person.name}>
<div className="flex items-center gap-x-6">
<Image
className="h-16 w-16 rounded-full"
src={person.imageUrl}
alt=""
width={900}
height={900}
/>
<div>
<h3 className="text-base font-semibold leading-7 tracking-tight text-gray-900">
{person.name}
</h3>
<p className="text-sm font-semibold leading-6 text-green-600">
{person.role}
</p>
</div>
</div>
</li>
))}
</ul>
</div>
</div>
<section className="relative isolate overflow-hidden bg-white px-6 py-24 sm:py-32 lg:px-8">
<div className="absolute inset-0 -z-10 bg-[radial-gradient(45rem_50rem_at_top,theme(colors.green.100),white)] opacity-20" />
<div className="absolute inset-y-0 right-1/2 -z-10 mr-16 w-[200%] origin-bottom-left skew-x-[-30deg] bg-white shadow-xl shadow-green-600/10 ring-1 ring-green-50 sm:mr-28 lg:mr-0 xl:mr-16 xl:origin-center" />
<div className="mx-auto max-w-2xl lg:max-w-4xl">
<h1 className="text-4xl font-bold text-center text-gray-900 mb-10">Our Mission</h1>
<figure>
<blockquote className="text-center text-xl font-semibold leading-8 text-gray-900 sm:text-2xl sm:leading-9">
<p>
“At PrakritiBazaar, we envision a future where every urban household is connected to nature through sustainable agricultural practices. Together, we strive to create greener, healthier, and more self-sufficient communities. We invite you to join us on this journey towards a more sustainable and harmonious urban life.”
</p>
</blockquote>
<figcaption className="mt-10">
<img
className="mx-auto h-10 w-10 rounded-full"
src="shivanshu.jpeg"
alt=""
/>
<div className="mt-4 flex items-center justify-center space-x-3 text-base">
<div className="font-semibold text-gray-900">Shivanshu Bhashkar</div>
<svg viewBox="0 0 2 2" width={3} height={3} aria-hidden="true" className="fill-gray-900">
<circle cx={1} cy={1} r={1} />
</svg>
<div className="text-gray-600">Developer of PrakritiBazaar</div>
</div>
</figcaption>
</figure>
</div>
</section>
<div className="bg-white">
<div className="mx-auto max-w-7xl py-24 sm:px-6 sm:py-32 lg:px-8">
<div className="relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
<svg
viewBox="0 0 1024 1024"
className="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
aria-hidden="true"
>
<circle
cx={512}
cy={512}
r={512}
fill="url(#759c1415-0410-454c-8f7c-9a820de03641)"
fillOpacity="0.7"
/>
<defs>
<radialGradient id="759c1415-0410-454c-8f7c-9a820de03641">
<stop stopColor="#F9FFF9" />
<stop offset={1} stopColor="#16A34A" />
</radialGradient>
</defs>
</svg>
<div className="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-32 lg:text-left">
<h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
Cultivating Nature's Bounty, Connecting Communities
</h2>
<p className="mt-6 text-lg leading-8 text-gray-300">
At PrakritiBazaar, we have created a vibrant online platform that celebrates the beauty and abundance of nature. Our marketplace is dedicated to urban agriculture, where farmers, growers, and nature enthusiasts come together to share the fruits of their labor and a deep passion for cultivating the land.
</p>
<div className="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
<Link
href="/api/auth/signin"
className="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
>
Get started
</Link>
<Link
href="mailto:[email protected]"
className="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
>
Contact Support
</Link>
</div>
</div>
<div className="relative mt-16 h-80 lg:mt-8">
<Image
className="absolute left-0 top-0 w-[57rem] max-w-none rounded-md bg-white/5 ring-1 ring-white/10"
src="/Screenshot.png"
alt="App screenshot"
width={1824}
height={1080}
/>
</div>
</div>
</div>
</div>
</div>
);
}
return (
<>
<div className="bg-white text-white min-h-screen">
<Nav />
<main > {children} </main>
</div>
</>
);
}
错误消息：错误未捕获错误：失败的道具类型：道具需要 或 in，但取而代之的是。hrefstringobject<Link>undefined
我尝试过什么：
- 已检查链接组件的导入是否正确。
- 已确保将 prop 正确传递给 Link 组件。
href - 已检查组件树，以确保没有冲突的道具或缺失值。
其他信息：
- 此错误专门发生在我使用 Link 组件的组件中。
- 我还尝试创建一个新的 Next.js 项目并传输代码，但问题仍然存在。
在解决此问题方面的任何帮助将不胜感激。谢谢！
答： 暂无答案
评论