这个终端是什么意思?(使用next .js next/router)

Question

我正在创建一个投资组合网站与Next.js &在ReactJs中顺风css(不是typescript)。我在Router(next/Router)上遇到了困难。我试图找到一个好的样本，复制粘贴，并试图尽可能多地修复。但是，有一件事我就是不明白，为什么每次我刷新网页时，这些字就会出现在我的终端上。

/
/works
/blog
/contact

这是我的navbar.js文件和menuItems.js。直到我把menuItems.js和navbar.js放进去，这些文字才出现。有什么问题吗?

navbar.js

import Link from "next/link";
import { useRouter } from "next/router";
import styles from "./layout.module.css";
import MenuItems from "./menuItems";
export const Nav = () => {
const router = useRouter();
return (
<div className={styles.nav}>
{MenuItems.map((item, index) => {
console.log(item.url);
return (
<div class="flex justify-center">
<Link href={item.url} key={index}>
<div
className={`p-4 cursor-pointer hover:opacity-40 ${
router.asPath === item.url
? "bg-gray-200"
: ""
}`}
>
<p className="text-secondary-300">{item.label}</p>
</div>
</Link>
</div>
);
})}
</div>
);
};
export default Nav;

menuItems.js

const MenuItems = [
{
label: 'Home',
url: "/",
active: true,
},
{
label: 'Works',
url: "/works",
active: false,
},
{
label: 'Blog',
url: "/blog",
active: false,
},
{
label: 'Contact',
url: "/contact",
active: false,
},
];

export default MenuItems;

几乎所有其他源代码都是基于Next.js教程。如果有人能帮助我，我会很感激的:)

Answer 1

你有一个console.log(item.url)

import Link from "next/link";
import { useRouter } from "next/router";
import styles from "./layout.module.css";
import MenuItems from "./menuItems";
export const Nav = () => {
const router = useRouter();
return (
<div className={styles.nav}>
{MenuItems.map((item, index) => {
console.log(item.url); //Because of this
return (
<div class="flex justify-center">
<Link href={item.url} key={index}>
<div
className={`p-4 cursor-pointer hover:opacity-40 ${
router.asPath === item.url
? "bg-gray-200"
: ""
}`}
>
<p className="text-secondary-300">{item.label}</p>
</div>
</Link>
</div>
);
})}
</div>
);
};