How to Create a New Page

Here is an example of how to create your custom page and add it to the left sidebar menu, breadcrumbs, and also meta tag.

1. Create a new folder in src/pages. ex. NewPage, and then create a tsx file in src/pages/NewPage with name index.tsx

Example :-

• Add Breadcrumbs component. It's a common component, it's used to add breadcrumbs to your page.

  - You have to pass 2 props here, the first is the title and the second is breadcrumbItem.

  - the title prop refers to the page title and the breadcrumbItem refers to the page's breadcrumb item's title.

• Add MetaTags to give a html title to your page.

import React from 'react';
interface IndexProps {}

const Index = (props: IndexProps) => {
        return (
            <div>
            </div>
        );
}

export default Index;

2. Add your new page's route in the src/routes/index.js file.

• Check the Routes section to see how to add routes to the web application.

• if you want to create a page with a blank layout, then add your page's routes in publicRoutes

  Example :-

  import newPage from "../pages/newPage"
  
  const publicRoutes = [
      { path: "/new-page", component: <newPage /> }                                          
  ]

• if you want to create a page with a full layout, then add your page's routes in privateRoutes

  Example :-

  import newPage from "../pages/newPage"
  
  const privateRoutes = [
      { path: "/new-page", component: <newPage /> }                                          
  ]