Create a New Page

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.tsx

Example :-

  • 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 <div className="page-content"><div> 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 pageTitle.

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

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

- With Layout
import React from 'react';
import { Container } from 'react-bootstrap';

//Import Breadcrumb
import Breadcrumb from 'Common/BreadCrumb';

const newPage = () => {
    document.title = "New Page | Toner eCommerce + Admin React Template";   //for meta title
    return (
        <>
            <div className="page-content">
                <Container fluid={true}>
                    <Breadcrumbs title="New Page" pageTitle="New Page" />
                        //write Typescript Code or structure
                </Container>
            </div>
        </>
    );
}

export default newPage;
- Without layout
import React from 'react';
import { Container } from 'react-bootstrap';

const newPage = () => {
    document.title = "New Page | Toner eCommerce + Admin React Template";   //for meta title
    return (
        <div>
            <Container>
                //write Typescript Code or structure
            </Container>
        </div>
    )
}

export default newPage;
- With Layout (FrontEnd Version)
import React from 'react';
import { Container } from 'react-bootstrap';

const newPage = () => {
    document.title = "New Page | Toner - React FrontEnd";   //for meta title
    return (
        <React.Fragment>
            <section>
                //write Typescript Code or structure
            </section>
        </React.Fragment>
    );
}

export default newPage;
- Without layout (FrontEnd Version)
import React from 'react';
import { Container } from 'react-bootstrap';

const newPage = () => {
    document.title = "New Page | Toner eCommerce + Admin React Template";   //for meta title
    return (
        <div>
            //write Typescript Code or structure
        </div>
    )
}

export default newPage;
2. Add your new page's route in /src/routes/index.tsx file.
  • Check the Routes section to see how to add routes to the web application.

  • if you want to create a page with 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 full layout, then add your page's routes in authProtectedRoutes

    Example :-

    import newPage from "../pages/newPage"
    
    const authProtectedRoutes = [
    { path: "/new-page", component: <newPage /> }                                          
    ]
3. Add a navigation in the layouts (Only For FrontEnd and BackEnd Versions)

For more details, check the Navigation page to see how to add menu item in your template.

  • For Vertical Layout :- /src/Layout/VerticalLayouts/index.tsx

  • For Horizontal Layout :- /src/Layout/HorizontalLayout/index.tsx

  • For Two Column Layout :- /src/Layout/TwoColumnLayout/index.tsx

2024 © Toner.
Design & Develop by Themesbrand