Create New Page

  1. Docs
  2. Create 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 resources/js/Pages. ex. NewPage, and then create a tsx file in resources/js/Pages/NewPage with name index.tsx

I) With Layout Example :-

  • For Create New Page With Layout.

  • Add BreadCrumb 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 pagrTitle.

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

  • Add Head and Link from @inertiajs/react and register as a component.

  • You can add meta tags in Head Component.

Components 

    import { Link, Head } from "@inertiajs/react";
    import Layout from "@/Layouts";

    // import breadcrumb
    import BreadCrumb from "@/Components/Common/BreadCrumb";  

     const newPage = () => {       
        return (
            <>
                <Head title=" New Page | Velzon - React Admin & Dashboard Template" />  //for meta title
                    <div className="page-content">
                        <Container fluid>
                            <BreadCrumb title="New Page" pageTitle="New Page" />
                        
                                //write Html code or structure

                        </Container>
                    </div>
            </>
        );
    }
newPage.layout = (page:any) => <Layout children={page} />
export default newPage;

II) Without Layout Example :-

  • For Create New Page Without Layout.

  • Without Layout Page doesn't have breadcrumbs.

Components 

import React from 'react';
import { Head } from "@inertiajs/react";
import GuestLayout from "@Layouts/GuestLayout";
                                                    
const newPage = () => {
return (
        <React.Fragment>
            <Head title=" New Page | Velzon - React Admin & Dashboard Template" />  //for meta title
                <GuestLayout>
                    //write Html code or structure
                </GuestLayout>
            </React.Fragment>
    )
}
                                                    
export default newPage;

2. How to add new route ?

You can easily add, change or remove any route by simply making changes described below:


1. Open routes/web.php file, declare your route. E.g. 

Route::middleware('auth')->group(function () {
    Route::controller(VelzonRoutesController::class)->group(function () {
        Route::get("/test-page", "test_func");
        // other routes
    });
});

2. Open app/Http/contollers/VelzonRoutesController.php file, declare your function. E.g. 

public function test_func(){
    return Inertia::render('NewPage/index');
}

© Velzon.
Design & Develop by Themesbrand