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