Vexel NextJS Typescript – Premium React Bootstrap Admin Template

NEXTJs Routing

Routing

In a single-page application, you change what the user sees by showing or hiding portions of the display that correspond to particular components, rather than going out to the server to get a new page. As users perform application tasks, they need to move between the different views that you have defined

To handle the navigation from one view to the next, you use the React Router. The Router enables navigation by interpreting a browser URL as an instruction to change the view. Your complete route structure is place at index.js file under src » index.js

Suppose you want to create a new module ( For creating a new module refer create new module ) then you have to add new routes for that modules.

Basic Route

Following are the fundamental building blocks to creating a route.

    
    import React, { Fragment } from "react";
    import Link from 'next/link';
    import { useRouter } from "next/router";
    
    
    <ul>
        <li>
            <Link href="/">Home
                </Link>
                    </li>
                    <li>
                    <Link href="/about">About Us
                    </Link>
                    </li>
                    <li>
                <Link href="/blog/hello-world">Blog Post
            </Link>
        </li>
    </ul>

Configure Link in Menu

To Add new link in Sidemenu

Following are the fundamental building blocks to creating a new link.

    
                        ├── shared
                            ├──layouts-components
                                ├──sidebar
                                    ├──sidemenu.tsx
export const MENUITEMS: any= [
                            {
                                menutitle: "MAIN",
                            },
                            {
                             path:"/components/dashboard/indexpage", title: "Dashboard", icon: dashboardsvg, type: "link", active: false, selected: false, dirchange: false
                            },
                            {
                                menutitle: "PAGES",
                            },
                        {
                            title: "Pages", icon: pagesSvg, type: "sub", active: false, selected: false, dirchange: false,
                            children: [
                                { path:"/components/pages/profile", type: "link", active: false, selected: false, dirchange: false, title: "Profile" },
                                { path:"/components/pages/notificationlist", type: "link", active: false, selected: false, dirchange: false, title: "Notification List" },
                                { path:"/components/pages/mailinbox", type: "link", active: false, selected: false, dirchange: false, title: "Mail-Inbox" },
                                { path:"/components/pages/gallery", type: "link", active: false, selected: false, dirchange: false, title: "Gallery" },
                                {
                                    title: "Extension", type: "sub", menusub: true, active: false, selected: false, dirchange: false,
                                    children: [
                                        { path:"/components/pages/extension/aboutcompany", type: "link", active: false, selected: false, dirchange: false, title: "About Company" },
                                        { path:"/components/pages/extension/faq", type: "link", active: false, selected: false, dirchange: false, title: "FAQS" },
                                    ],
                                },
                                {
                                    title: "File Manager", type: "sub", menusub: true, active: false, selected: false, dirchange: false,
                                    children: [
                                        { path:"/components/pages/filemanager/filemanager", type: "link", active: false, selected: false, dirchange: false, title: "File Manager" },
                                        { path:"/components/pages/filemanager/filemanagerlist", type: "link", active: false, selected: false, dirchange: false, title: "File Manager List" },
                                    ],
                                },
                            
                            ],
                        },
                    ]