How to create a custom page

Here is the example on how to create your own page and add it to the left side menu and breadcrumbs.

1. Create page component src/app/pages/MyPage.js

   import React from "react";
                     
   export function MyPage() {
       return <h1>Hello!</h1>
   }   

2. Update src/app/BasePage.js

   import React from "react";
   import {Redirect, Route, Switch} from "react-router-dom";
   import {LayoutSplashScreen, ContentRoute} from "../_metronic/layout";
   import {BuilderPage} from "./pages/BuilderPage";
   import {DashboardPage} from "./pages/DashboardPage";
   import GoogleMaterialPage from "./google-material/GoogleMaterialPage";
   + import {MyPage} from "./pages/MyPage";
   
   export default function HomePage() {
       return (
           <Switch>
               {
                   /* Redirect from root url to /dashboard. */
                   <Redirect exact={true} from="/" to="/dashboard" />
               }
                     
               <ContentRoute path="/builder" component={Builder} />
               <ContentRoute path="/dashboard" component={Dashboard} />
               <Route path="/google-material" component={GoogleMaterialPage} />
               +    <ContentRoute path="/my-page" component={MyPage} />
           </Switch>
       );
   }    

3. Add menu in src/_metronic/layout/components/aside/aside-menu/AsideMenuList.js

   
   {/*begin::1 Level*/}
   <li
       className={`menu-item ${getMenuItemActive("/dashboard")}`}
       aria-haspopup="true"
   >
       <NavLink className="menu-link" to="/dashboard">
           <span className="svg-icon menu-icon">
               <SVG src={toAbsoluteUrl("/media/svg/icons/Design/Layers.svg")}/>
           </span>
           <span className="menu-text">Dashboard&l/span>
       </NavLink>
   </li>
   {/*end::1 Level*/}
   
   
   {/*begin::1 Level*/}
   +<li
   +    className={`menu-item ${getMenuItemActive("/my-page")}`}
   +    aria-haspopup="true"
   +>
   +    <NavLink className="menu-link" to="/my-page">
   +        <span className="svg-icon menu-icon">
   +            <SVG src={toAbsoluteUrl("/media/svg/icons/Design/Layers.svg")}/>
   +        </span>
   +        <span className="menu-text">My Page</span>
   +    </NavLink>
   +</li>
   +{/*end::1 Level*/}