Hyperlink 使用Next.js在侧边栏中导航不起作用

我正在使用Next.js尝试一个侧边栏，但是代码是React格式的，我只是尝试复制它并将其转换为Next.js。它不会指向导航中的任何链接

还有为什么右边没有显示内容，请有人帮忙。我已经在底部发布了_app.js文件

从“React”导入React 从“/SidebarData”导入{SidebarData} 从“react bootstrap”导入{Row} 从“下一个/路由器”导入{useRouter} 导出默认函数边栏{ const router=useRouter 回来 {SidebarData.mapval，key=>{ 回来 { router.pathname=val.link }} > {val.icon} {val.title} }} } 从“React”导入React 从“@material ui/icons/Home”导入HomeIcon； 从“@material ui/icons/FormatListNumberedRtl”导入FormatListNumberedRtlIcon； 从“@material ui/icons/Note”导入NoteIcon； 从“@material ui/icons/DateRange”导入日期范围图标； 从“@material ui/icons/TrendingUp”导入TrendingUpIcon； 从“@material ui/icons/Poll”导入PollIcon； 从“@material ui/icons/PieChart”导入PieChart图标； 从“下一个/链接”导入链接 导出常量SidebarData=[ { 标题：家， 图标：， 链接：/home }, { 标题：类别， 图标：， 链接：/categories }, { 标题：记录， 图标：， 链接：/记录 }, { 标题：月收入， 图标：， 链接：/图表/月收入 }, { 标题：每月费用， 图标：， 链接：/图表/每月费用 }, { 标题：趋势， 图标：， 链接：/图表/趋势 }, { 标题：细分， 图标：， 链接：/图表/分类明细 } ] 导入“../styles/globals.css” 导入'bootstrap/dist/css/bootstrap.min.css'； 导入@fortwome/fontwome svg core/styles.css；//导入字体和CSS 从@fortawesome/fontawesome svg核心导入{config}； config.autoAddCss=false； 从“../components/Sidebar”导入侧栏 函数MyApp{Component，pageProps}{ 回来 } 导出默认MyApp

---

如何在中间显示其他页面的内容？

在您的情况下，导航到其他页面的正确方法是使用router.push的s onClick回调

//边栏 { router.pushval.link//替换为'router.push'` }} > {val.icon} {val.title} 至于没有显示的页面内容，这是因为您在_app中将页面组件作为侧边栏的子级传递，但侧边栏不会呈现传递给它的任何子级

在这种情况下，您可以通过在侧栏的JSX中的某个位置添加{children}来呈现其子级，或者根本不将页面组件作为子级传递给侧栏

//_应用程序 函数MyApp{Component，pageProps}{ 回来 }