Javascript 如何在nextjs中呈现动态递归菜单？

我正在用nextjs中的子菜单（递归）创建站点导航。一切正常，控制台日志选项卡中未发现错误。我做了两个实验：一个是静态菜单（比如说静态导航），另一个是从RESTAPI动态提取数据（比如说动态导航）

然而，我发现我的导航处于一种奇怪的状态。一旦我使用了静态nav，它将在客户端和服务器上呈现（我确实查看源代码）。另一方面，我的动态nav只在客户机上工作（我也从源代码视图进行检查）。我确信我的

RecursiveMenu

组件中有问题，但我还没有找到任何解决方案，因为它没有像我之前所说的那样产生任何错误

有什么想法吗

// menu lists from API
[
    {
        "ID": 1,
        "parent": 0,
        "title": "About Us",
        "url": "http://localhost.dev/about-us/",
        "object": "page",
        "children": []
    },
    {
        "ID": 2,
        "parent": 0,
        "title": "Hello world!",
        "url": "http://localhost.dev/hello-world/",
        "object": "post",
        "children": []
    },
    {
        "ID": 3,
        "parent": 0,
        "title": "More",
        "url": "#",
        "object": "custom",
        "children": [
            {
                "ID": 4,
                "parent": 3,
                "title": "Hello Dolly",
                "url": "http://localhost.dev/hello-dolly/",
                "object": "post",
                "children": []
            }
        ]
    }
]

这里是我的静态导航：

import React from 'react'
import { Link } from '../../routes' // from next-routes

const Nav = () => (
    <nav>
      <ul>
        <li>
          <Link route="/">
            <a>Home</a>
          </Link>
        </li>
        <li>
          <Link route="post" params={{slug: "single-post"}}>
            <a>Single Post</a>
          </Link>
        </li>
        <li>
          <Link route="page" params={{slug: "sample-page"}}>
            <a dangerouslySetInnerHTML={{__html: "Sample &amp; Page"}} />
          </Link>
        </li>
      </ul>
    </nav>
)
export default Nav

从“React”导入React
从“../../routes”//从下一个路由导入{Link}
常量导航=（）=>(


家


单柱




)
导出默认导航

这是我的递归组件：

import React from 'react'
import { Link } from '../../routes' // from next-routes

import parse from 'url-parse'

const RecursiveMenu = (props) => {
    const dontClick = (e) => {
        e.preventDefault();
    }
    return(
        <ul>
            {props.datamenu.length > 0 && props.datamenu.map((menu) => {

                // customize paths & slugs from rest
                let parsedUrl = parse(menu.url, true)
                let menuObject = menu.object
                let stripCustom = menuObject.indexOf('custom') === 0 ? '/' : menu.object
                let itemslug = parsedUrl.pathname.slice(1, -1) // remove slashes from "/hello-world/" to "hello-world"

                return(
                    <li key={menu.ID}>
                        {
                            menu.children.length > 0
                            ? (
                                // the route props will detects whether post. page, category, etc from object
                                <Link route={`${stripCustom}`} params={{slug: itemslug}} >
                                    <a dangerouslySetInnerHTML={{__html: menu.title}} onClick={(e) => dontClick(e)} />
                                </Link>
                            )
                            : (
                                // the route props will detects whether post. page, category, etc from object
                                <Link route={`${stripCustom}`} params={{slug: itemslug}} >
                                    <a dangerouslySetInnerHTML={{__html: menu.title}} />
                                </Link>
                            )
                        }
                        {
                            menu.children !== undefined
                            && menu.children.length > 0
                            && <RecursiveMenu datamenu={menu.children} />
                        }
                    </li>
                )
            })}
        </ul>
    )
}
export default RecursiveMenu

从“React”导入React
从“../../routes”//从下一个路由导入{Link}
从“url解析”导入解析
常量递归菜单=（道具）=>{
常数dontClick=（e）=>{
e、 预防默认值（）；
}
返回(

{props.datamenu.length>0&&props.datamenu.map（（菜单）=>{
//从rest自定义路径和段塞
让parsedUrl=parse（menu.url，true）
让menuObject=menu.object
让stripCustom=menuObject.indexOf（'custom'）==0？'/'：menu.object
让itemslaug=parsedUrl.pathname.slice（1，-1）//删除从“/hello world/”到“hello world”的斜杠
返回(

{
menu.children.length>0
? (
//路由道具将检测是否从对象发送帖子、页面、类别等
dontClick（e）}/>
)
: (
//路由道具将检测是否从对象发送帖子、页面、类别等
)
}
{
menu.children！==未定义
&&menu.children.length>0
&& 
}

)
})}

)
}
导出默认递归菜单