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>