我目前正在前端使用 Next.js 使用 Wordpress API。我想获取我的导航/菜单数据并进行预渲染。<nav> </nav>
我已经尝试过,但是当我检查源代码时只呈现一个空元素。有一个简单的解决方案吗?
这是我的导航组件:
import { Config } from "../config";
import Link from "next/link";
import useFetch from "../hooks/useFetch";
export default function MainNav() {
const links = useFetch(`${Config.apiUrl}/wp-json/menus/v1/menus/main-nav`);
return (
<nav>
{!!links &&
links.map((link) => (
<Link href="/">
<a>{link.title}</a>
</Link>
))}
</nav>
);
}
还有我的自定义useFetch.js
钩子:
import { useEffect, useState } from "react";
export default function useFetch(url) {
const [links, setLinks] = useState();
// Must use useEffect in non-page component
useEffect(async () => {
let res = await fetch(url);
res = await res.json();
setLinks(res.items);
}, []);
return links;
}