In the last lesson, we stopped before creating the login form. But, to create the login form, we need to get familiar with forms and how they work in Inertia in general.
We will do that based on another form: we will create the "Add new post" form and apply that form to the login form in the following lessons a bit later.
Preparation: React Component, Route and Controller
First, we need to create a React component where the form will be, then the route, and then we need to submit the form.
**resources/js/Pages/Posts/Create.jsx:
import AppLayout from '../../Layouts/AppLayout.jsx';import { Head, Link, useForm } from '@inertiajs/react'; export default function CreatePost() { return ( <AppLayout> <Head title="New Post" /> <div> Form here </div> </AppLayout> );}
In the routes, we will transform the post route into a resource.
routes/web.php:
Route::get('posts', [PostController::class, 'index'])->name('posts.index'); Route::resource('posts', PostController::class); Route::inertia('about', 'About')->name('about');Route::inertia('login', 'Pages/Login')->name('login');
In the PostController
we need to return Inertia in the create()
method.
app/Http/Controllers/PostController.php:
use Inertia\Inertia;use Inertia\Response; class PostController extends Controller{ // public function create(): Response { return Inertia::render('Posts/Create'); } }
After visiting the posts/create
page, we see the page with the Form here
text.
Add Link to the Form
Next, add a link..