How to Create a New Page

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

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

• As you know, there are 2 different types of layouts, first is Blank Layout and second is Full layout.

- if you want to make your page blank layout, then you need to wrap your page's content with <Container fluid={false}>

- if you want to make your page with full layout, then you need to wrap your page's content with

tag and <Container fluid={true}>
Add Breadcrumbs component. it's a common component, it's used to add breadcrumbs in your page.
- You have to pass 2 props here, first is title and second is breadcrumbItem.
- the title prop refers to page title and the breadcrumbItem refers to page's breadcrumb item's title.
Add MetaTags to give a html title to your page.

- Hook Base Components

import React from 'react';
import { Container } from "reactstrap";

//Import Breadcrumb
import BreadCrumb from "Common/BreadCrumb";
       
    const newPage = () => {
        document.title = "New Page | Judia - React Admin & Dashboard Template"; //for meta title
        return (
        <div>
            <div className="page-content">
                <Container fluid={true}>
                    <Breadcrumbs pageTitle="New Page"
                    title="New Page" />

                            //write Html code or structure

                </Container>
            </div>
        </div>
    );
} 
export default newPage;

- Hooks with ( or without layout) Components

import React from 'react';
import { Container } from "reactstrap";
                                                        
const newPage = () => {
    document.title = "New Page | Judia - React Admin & Dashboard Template";   //for meta title
    return (
        <div>
            <Container>
                //write Html code or structure
            </Container>
        </div>
    )
}
                                                        
export default newPage;

2. Add your new page's route in src/Routes/allRoutes.tsx file.

Example :-

import newPage from "../pages/newPage"

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

Example :-

import newPage from "../pages/newPage"

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

3. Add a navigation in the layouts For more details, check the Navigation page to see how to add menu item in your template.