侧边栏中的导航无法使用 Next.js

如何解决侧边栏中的导航无法使用 Next.js

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

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

import React from 'react'
import {SidebarData} from './SidebarData'
import {Row} from 'react-bootstrap'
import {useRouter} from 'next/router'

export default function Sidebar() {

    const router = useRouter()

    return (
        <div className="Sidebar">
            <ul className="SidebarList">
                {SidebarData.map((val,key) => {
                    return ( 
                        <li 
                            key={key} 
                            className="row"
                            id={router.pathname == val.link ? "active" : ""}
                            onClick={()=> {
                                router.pathname = val.link
                            }}
                        >                   
                            <div id="icon">{val.icon}</div> 
                            <div id="title">{val.title}</div>
                        </li>
                        
                    )   
                })}
            </ul>
        </div>
    )
}

import React from 'react'
import HomeIcon from '@material-ui/icons/Home';
import FormatListNumberedRtlIcon from '@material-ui/icons/FormatListNumberedRtl';
import NoteIcon from '@material-ui/icons/Note';
import DaterangeIcon from '@material-ui/icons/Daterange';
import TrendingUpIcon from '@material-ui/icons/TrendingUp';
import PollIcon from '@material-ui/icons/Poll';
import PieChartIcon from '@material-ui/icons/PieChart';
import Link from 'next/link'

export const SidebarData = [
    {

        title: "Home",icon: <HomeIcon />,link: "/home"

    },{

        title: "Categories",icon: <FormatListNumberedRtlIcon />,link: "/categories"

    },{

        title: "Records",icon: <NoteIcon />,link: "/records"

    },{

        title: "Monthly Income",icon: <PollIcon />,link: "/charts/monthly-income"

    },{

        title: "Monthly Expense",link: "/charts/monthly-expense"

    },{

        title: "Trend",icon: <TrendingUpIcon />,link: "/charts/trend"

    },{

        title: "Breakdown",icon: <PieChartIcon />,link: "/charts/category-breakdown"

    }
]

import '../styles/globals.css'
import 'bootstrap/dist/css/bootstrap.min.css';
import "@fortawesome/fontawesome-svg-core/styles.css"; // import Font Awesome CSS
import { config } from "@fortawesome/fontawesome-svg-core";
config.autoAddCss = false;
import Sidebar from '../components/Sidebar'

function MyApp({ Component,pageProps }) {
    return (
        <>
            <div className="App">
                <Sidebar>
                    <Component {...pageProps} />
                </Sidebar>
            </div>
        </>
    )
}

export default MyApp

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

解决方法

就您而言，导航到另一个页面的正确方法是在您的 router.push 的 <li> 回调中使用 onClick。

// Sidebar
<li 
    key={key} 
    className="row"
    id={router.pathname == val.link ? "active" : ""}
    onClick={()=> {
        router.push(val.link) // Replaced with `router.push`
    }}
>                   
    <div id="icon">{val.icon}</div> 
    <div id="title">{val.title}</div>
</li>

至于页面内容没有显示，那是因为您将页面组件作为 Sidebar 中 _app 的子组件传递，但是 Sidebar 没有呈现任何传递给的子组件

在这种情况下，您可以通过在 {children} 的 JSX 中的某处添加 Sidebar 来呈现其子项，或不将页面组件作为子项传递给 { {1}}。

Sidebar