How to Create a Custom Page

Here is the example on how to create your custom page and add it to the leftsidebar menu and breadcrumbs.

1. Create a page component in the src/pages with name newPage.js

Example :-

import React from 'react';

//Import Breadcrumb
import Breadcrumbs from "../../components/Common/Breadcrumb"

    const newPage = () => {
        return (
            <Breadcrumbs title="New Page" breadcrumbItem="New Page" />
            This is New Page
        );
    }

export default newPage;

2. Set the route in the both version (Hook base & Class base) src/routes/allRoutes.js file.

Example :-

import newPage from "../pages/newPage"

/** If u want to create a new page (with layouts) **/

const authProtectedRoutes = [
    { path: "/new-page", component: newPage }                                          
]
    or 

/** If u want to create Auth layout (without header footer) **/

const publicRoutes = [
    { path: "/new-page", component: newPage }                                          
]

3. Add Link of the page in Vertical Layout and Horizontal Layout

For Vertical Layout :- src/components/VerticalLayout/SidebarContent.js

For Horizontal Layout :- src/components/HorizontalLayout/Navbar.js

Example :-

/** Vertical layout */

<ul className="metismenu list-unstyled" id="side-menu">
    <li>
        <Link to="/new-page">{props.t("New Page")}</Link>
    </li>
<ul>


/** Horizontal layout */
    
<ul className="navbar-nav">
    <li>
        <Link to="/new-page">{props.t("New Page")}</Link>
    </li>
</ul>