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

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

import React from 'react';
import MetaTags from 'react-meta-tags';  // Added Meta Tag npm Package
import { Container } from "reactstrap";

//Import Breadcrumb
import Breadcrumbs from "../../components/Common/Breadcrumb";

    const newPage = () => {
        return (
            <>
                <div className="page-content">
                    <MetaTags>
                    <title>New Page | Skote - React Admin & Dashboard Template</title>
                    </MetaTags>
                    <Container fluid={true}>
                        <Breadcrumbs title="New Page" breadcrumbItem="New Page" />
                        
                            //write Html code or structure

                    </Container>
                </div>
            </>
        );
    }

export default newPage;

import React, { Component } from 'react';
import MetaTags from 'react-meta-tags';  // Added Meta Tag npm Package
import { Container } from "reactstrap";

    const newPage = () => {
        return (
            <div>
                <MetaTags>
                  <title>New Page | Skote - React Admin & Dashboard Template</title>
                </MetaTags>
                    <Container>
                        //write Html code or structure
                    </Container>
            </div>
        )
    }

export default newPage;

import React from 'react';
import MetaTags from 'react-meta-tags';  // Added Meta Tag npm Package
import { Container } from "reactstrap";

//Import Breadcrumb
import Breadcrumbs from "../../components/Common/Breadcrumb";

class newPage extends Component {
    render() {
        return (
            <>
                <div className="page-content">
                    <MetaTags>
                    <title>New Page | Skote - React Admin & Dashboard Template</title>
                    </MetaTags>
                    <Container fluid={true}>
                        <Breadcrumbs title="New Page" breadcrumbItem="New Page" />
                        
                            //write Html code or structure

                    </Container>
                </div>
            </>
        );
    }
}

export default newPage;

import React, { Component } from 'react';
import MetaTags from 'react-meta-tags';  // Added Meta Tag npm Package
import { Container } from "reactstrap";

class newPage extends Component {
    render() {
        return (
            <div>
                <MetaTags>
                  <title>New Page | Skote - React Admin & Dashboard Template</title>
                </MetaTags>
                    <Container>
                        //write Html code or structure
                    </Container>
            </div>
        )
    }
}

export default newPage;

2. Add your new page's route in /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 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

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

• For Vertical Layout :- /src/components/VerticalLayout/SidebarContent.js

• For Horizontal Layout :- /src/components/HorizontalLayout/Navbar.js

Example :-

    /** Vertical layout */
    
    <ul className="metismenu list-unstyled" id="side-menu">
        <li>
            <Link to="/new-page">{this.props.t("New Page")}</Link>
        </li>
    <ul>
    
    
    /** Horizontal layout */
        
    <ul className="navbar-nav">
        <li>
            <Link to="/new-page">{this.props.t("New Page")}</Link>
        </li>
    </ul> 

/** Vertical layout */

<ul className="metismenu list-unstyled" id="side-menu">
    <li>
        <Link to="/new-page">{props.t("New Page")}</Link>
    </li>
<ul>


/** Horizontal layout */
    
<ul className="navbar-nav">
    <li>
        <Link to="/new-page">{props.t("New Page")}</Link>
    </li>
</ul>