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