代码之家 › 专栏 › 技术社区 › user51

Nextjs13错误:失败的道具类型:道具“href'”在“<链接>”中应为“字符串”或“对象”,但实际为“未定义”

next nextjs13 next.js javascript

user51 · 技术社区 · 1 年前

我正在学习nextjs book “使用服务器端渲染构建React应用程序”

在这篇文章中,我正在构建一个基本的react应用程序,该应用程序具有指向about页面的索引页面链接。

该项目 package.json -

{
  "name": "my-next-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "next",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^13.4.19",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

pages/index.js 是-

import React from "react";
import Link from "next/link";

function MyComponent() {
  return (
    <div>
      <p>Hello from Next.js</p>
      <Link herf="/About"> <a> About</a> </Link>
    </div>
  );
};

export default MyComponent;

pages/about.js 是-

import React from "react";

function About() {
  return (
    <div>
      This is an application built using next.js to demonstrate the effectiveness of server side rendering.

    </div>
  );
}

export default About;

当我运行npm启动时,我得到以下错误-

Server Error
Error: Failed prop type: The prop `href` expects a `string` or `object` in `<Link>`, but got `undefined` instead.

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
createPropError
node_modules/next/dist/client/link.js (128:19)
createPropError
node_modules/next/dist/client/link.js (138:26)
Array.forEach
<anonymous>
forEach
node_modules/next/dist/client/link.js (135:22)
renderWithHooks
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5658:16)
renderForwardRef
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5842:18)
renderElement
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6005:11)
renderNodeDestructiveImpl
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderChildrenArray
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6211:7)
renderNodeDestructiveImpl
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6141:7)
renderNodeDestructive
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderHostElement
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5642:3)
renderElement
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5952:5)
renderNodeDestructiveImpl
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderIndeterminateComponent
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5785:7)
renderElement
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5946:7)
renderNodeDestructiveImpl
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
finishClassComponent
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5688:3)
renderClassComponent
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5696:3)
renderElement
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5943:7)
renderNodeDestructiveImpl
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderIndeterminateComponent
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5785:7)
renderElement
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5946:7)
renderNodeDestructiveImpl
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderChildrenArray
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6211:7)
renderNodeDestructiveImpl
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6141:7)
renderNodeDestructive
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderElement
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5971:9)
renderNodeDestructiveImpl
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderChildrenArray
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6211:7)
renderNodeDestructiveImpl
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6141:7)
renderNodeDestructive
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderElement
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5971:9)
renderNodeDestructiveImpl
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderContextProvider
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5920:3)
renderElement
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6017:11)
renderNodeDestructiveImpl
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderContextProvider
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5920:3)

我检查了其他stackoverflow问题,但找不到解决这个问题的方法。

知道怎么解决这个问题吗?

1 回复 | 直到 1 年前

Robin Thomas 1 年前

您的 pages/index.js href 而不是 herf 。

以下是固定组件:

import React from "react";
import Link from "next/link";

function MyComponent() {
  return (
    <div>
      <p>Hello from Next.js</p>
      <Link href="/About"> <a> About</a> </Link>
    </div>
  );
};

export default MyComponent;