问题描述
我是第一次使用Nextjs。
我正在尝试创建由<Header><different-layouts-for-each><Footer>
结构组成的多个布局。
我面临的问题是getStaticProps或getServerProps只能在页面级别运行。
由于导航中需要SEO,我想我应该使用上述两种方法之一在每个页面文件上获取它的道具。
这里的问题是我必须在每个页面上都获得菜单道具,但是要使用不同的模板,我必须在所有页面上重复我自己,以便静态或预先呈现内容并成为SEO可读。
在<MainNav>
组件上获得菜单道具将是理想的情况。
我尝试在组件上进行asnyc / await:
<Header>
组件
import logo from "../components/header/logo";
import MainNav from "../components/header/mainnav.js";
function Header() {
return (
<div className="headwrapper container mx-auto py-8 flex items-center">
<logo />
<MainNav/>
</div>
);
}
export default Header;
<MainNav>
组件
import Link from "next/link";
import { WpHeader } from "../../lib/wpapi";
import React,{ useEffect,useState } from "react";
function MainNav() {
const [nav,setNav] = useState(0);
useEffect(() => {
const fetchData = async () => {
const wp = new WpHeader();
const call = await wp.getAxiosMenu();
console.log(call);
setNav(call);
};
fetchData();
},[]);
return (
<div className="navigation text-right w-3/4">
<ul className="main-navigation">
{nav
? nav.map(item => (
<li key={item.id} className="inline-block mx-2">
<Link href={item.path}>
<a>{item.label}</a>
</Link>
</li>
))
: "loading"}
</ul>
</div>
);
}
export default MainNav;
这里的问题是,这将返回一个承诺,并且html将显示“正在加载”,而不是实际的菜单html。
谢谢。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)