Next.js使用next/router时刷新页面终端打印路由路径是何原因？

问题根因 #

你在navbar.js的MenuItems.map遍历逻辑里直接写了console.log(item.url)语句，每次Nav组件渲染时，都会遍历所有菜单项、逐行打印每个菜单项的url值，这就是你刷新页面时终端输出四个路径的原因，不属于代码错误，也和next/router的功能无关，只是多余的调试日志没有删除导致的。

解决方法 #

直接删除navbar.js中MenuItems.map回调函数里的console.log(item.url)这一行即可，后续刷新页面就不会再出现相关打印内容。

额外优化点 #

• React组件的返回值内部的遍历/渲染逻辑会在每次组件重渲染时完整执行，不要在这类逻辑里保留多余的调试打印语句，否则会产生无意义的日志输出
• 你当前代码里还有一个小问题：渲染菜单项外层的div用的是class属性，React规范里要写className，建议一并修改避免潜在的样式不生效问题

内容的提问来源于stack exchange，提问作者natsu_0