AskOverflow.Dev

AskOverflow.Dev Logo AskOverflow.Dev Logo

AskOverflow.Dev Navigation

  • 主页
  • 系统&网络
  • Ubuntu
  • Unix
  • DBA
  • Computer
  • Coding
  • LangChain

Mobile menu

Close
  • 主页
  • 系统&网络
    • 最新
    • 热门
    • 标签
  • Ubuntu
    • 最新
    • 热门
    • 标签
  • Unix
    • 最新
    • 标签
  • DBA
    • 最新
    • 标签
  • Computer
    • 最新
    • 标签
  • Coding
    • 最新
    • 标签
主页 / coding / 问题 / 76937375
Accepted
user51
user51
Asked: 2023-08-20 07:16:01 +0800 CST2023-08-20 07:16:01 +0800 CST 2023-08-20 07:16:01 +0800 CST

Nextjs13 错误:失败的道具类型:道具“href”需要“<Link>”中的“字符串”或“对象”,但得到“未定义”

  • 772

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

在此,我正在构建基本的反应应用程序,其中索引页面链接到关于页面。

该项目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 start 时出现以下错误 -

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 问题,但找不到解决此问题的方法。

知道如何解决这个问题吗?

javascript
  • 1 1 个回答
  • 16 Views

1 个回答

  • Voted
  1. Best Answer
    Robin Thomas
    2023-08-20T07:37:25+08:002023-08-20T07:37:25+08:00

    你的 中有一处错字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;
    
    • 1

相关问题

  • 合并排序不起作用 - Javascript代码:即使在调试后也无法找到错误

  • select.remove() 方法工作得很奇怪[关闭]

  • useOpenWeather() 中总是出现 401 res -react-open-weather lib [重复]

  • 输入元素没有只读属性,但字段仍然不可编辑[关闭]

  • 如何编辑 D3.js RadialTree 的第一个节点半径?

Sidebar

Stats

  • 问题 205573
  • 回答 270741
  • 最佳答案 135370
  • 用户 68524
  • 热门
  • 回答
  • Marko Smith

    使用 <font color="#xxx"> 突出显示 html 中的代码

    • 2 个回答
  • Marko Smith

    为什么在传递 {} 时重载解析更喜欢 std::nullptr_t 而不是类?

    • 1 个回答
  • Marko Smith

    您可以使用花括号初始化列表作为(默认)模板参数吗?

    • 2 个回答
  • Marko Smith

    为什么列表推导式在内部创建一个函数?

    • 1 个回答
  • Marko Smith

    我正在尝试仅使用海龟随机和数学模块来制作吃豆人游戏

    • 1 个回答
  • Marko Smith

    java.lang.NoSuchMethodError: 'void org.openqa.selenium.remote.http.ClientConfig.<init>(java.net.URI, java.time.Duration, java.time.Duratio

    • 3 个回答
  • Marko Smith

    为什么 'char -> int' 是提升,而 'char -> Short' 是转换(但不是提升)?

    • 4 个回答
  • Marko Smith

    为什么库中不调用全局变量的构造函数?

    • 1 个回答
  • Marko Smith

    std::common_reference_with 在元组上的行为不一致。哪个是对的?

    • 1 个回答
  • Marko Smith

    C++17 中 std::byte 只能按位运算?

    • 1 个回答
  • Martin Hope
    fbrereto 为什么在传递 {} 时重载解析更喜欢 std::nullptr_t 而不是类? 2023-12-21 00:31:04 +0800 CST
  • Martin Hope
    比尔盖子 您可以使用花括号初始化列表作为(默认)模板参数吗? 2023-12-17 10:02:06 +0800 CST
  • Martin Hope
    Amir reza Riahi 为什么列表推导式在内部创建一个函数? 2023-11-16 20:53:19 +0800 CST
  • Martin Hope
    Michael A fmt 格式 %H:%M:%S 不带小数 2023-11-11 01:13:05 +0800 CST
  • Martin Hope
    God I Hate Python C++20 的 std::views::filter 未正确过滤视图 2023-08-27 18:40:35 +0800 CST
  • Martin Hope
    LiDa Cute 为什么 'char -> int' 是提升,而 'char -> Short' 是转换(但不是提升)? 2023-08-24 20:46:59 +0800 CST
  • Martin Hope
    jabaa 为什么库中不调用全局变量的构造函数? 2023-08-18 07:15:20 +0800 CST
  • Martin Hope
    Panagiotis Syskakis std::common_reference_with 在元组上的行为不一致。哪个是对的? 2023-08-17 21:24:06 +0800 CST
  • Martin Hope
    Alex Guteniev 为什么编译器在这里错过矢量化? 2023-08-17 18:58:07 +0800 CST
  • Martin Hope
    wimalopaan C++17 中 std::byte 只能按位运算? 2023-08-17 17:13:58 +0800 CST

热门标签

python javascript c++ c# java typescript sql reactjs html

Explore

  • 主页
  • 问题
    • 最新
    • 热门
  • 标签
  • 帮助

Footer

AskOverflow.Dev

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

Language

  • Pt
  • Server
  • Unix

© 2023 AskOverflow.DEV All Rights Reserve