Courses

React.js + Inertia in Laravel 11: From Scratch

New "About" Page with Links Menu

Summary of this lesson:
- Create static About page
- Add Inertia Links for SPA navigation
- Use route names with Ziggy package
- Implement client-side routing
- Simplify route referencing

Now, let's talk about links in Inertia. What do I mean by links? Currently, we only have the list of posts. Let's create another static page: for example, "About us". We will create two links above the table to link between the pages, and you will see the benefit of Inertia in terms of the SPA functionality.


Creating a Page

First, let's create a new React component and add some text.

There are no Artisan commands to create React components. You have to do that manually.

resources/js/Pages/About.jsx:

export default function About() {
return (
<div>
About us
</div>
);
}

Because this page is static, we can define Route similar to how we would do if defining Route only for a view.

routes/web.php:

Route::view('/', 'dashboard')->name('dashboard');
 
Route::get('posts', [PostController::class, 'index']);
Route::inertia('about', 'About')->name('about');

And now, when we visit the /about page, we can see the text from About Vue component.


Adding Links

Now, let's add the links.

resources/js/Pages/Posts/Index.jsx:

export default function PostsIndex({ posts }) {
return (
<div>
<div className="mb-4">
<a className="mr-2" href="/posts">Posts</a>
<a href="/about">About</a>
</div>
 
<table className="min-w-full divide-y divide-gray-200 border">
// ...
);
};

But, after clicking on the About in the Network tab, we can see that the page was fully reloaded with all the assets, which isn't SPA.

Instead of using a tag we must use...

The full lesson is only for Premium Members.
Want to access all 18 lessons of this course? (57 min read)

You also get:

  • 69 courses (majority in latest Laravel 11)
  • Premium tutorials
  • Access to repositories
  • Private Discord