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.
-
Create page component
src/app/pages/MyPage.js
import React from "react"; export function MyPage() { return <h1>Hello!</h1> }
-
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> ); }
-
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*/}
