hyperlink - Navigation in Sidebar not working using Next.js

Question

I am trying a sidebar using Next.js but the code is in React format, I just tried to copy this and convert it to Next.js. It is not going to any links in the navigation

Also why the contents is not showing on the right, can someone please help. I have posted the _app.js file at the bottom

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" ,
        icon: <PollIcon />,
        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

How can I show the content of the other pages at the middle?

question from:https://stackoverflow.com/questions/65888659/navigation-in-sidebar-not-working-using-next-js

Answer 1

In your case, the proper way to navigate to another page is to use router.push in your <li>s onClick callback.

// 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>

As for the page content not showing, that's because you're passing the page's component as a child of Sidebar in _app, but the Sidebar is not rendering any children passed to it.

In this case you can either render its children by adding {children} somewhere in the Sidebar's JSX, or not pass the page component as a child to the Sidebar at all.

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