From the course: Building a Website with Laravel, React.js, and Inertia

Creating an Inertia navigation - Laravel Tutorial

From the course: Building a Website with Laravel, React.js, and Inertia

Start my 1-month free trial Buy for my team

Creating an Inertia navigation

“

- [Instructor] Since we have two pages, we might as well do the navigation now. Let's create a navigation.jsx file in the Components directory. Again, I'm going to copy what we had in our React app and make it work for Inertia. We are already using the Link component, but this is the React's own component. We need to replace it with Inertia's own component. So instead of importing it from React, we will import it from inertiajs/react. Inertia's link component is a light wrapper around a standard anchor a link that intercepts click events and prevents full page reloads, which is what will give us the single-page application feel. We also need to replace the to element with the href, and use named routes as we would in a Blade view. Next, let's include the navigation and layout. This is the benefit of using a starter kit, because we already have layouts defined that we can use. In our case, we will use the GuestLayout, because we are not using authentication in this project. I will remove the Link component and the application's logo imports and component, so all we have left here is the div that were written, the children placeholder. Let's import a navigation component and use it inside the wrapper div. Also, before we leave this file, let's fix the style a bit. I removed all the default styling and used the style from a React app. Okay, let's now wrap our about page inside the GuestLayout and import it. Let's check it in the browser. And yes, we have our page. The styling is good, and we have our links. The about page implements the GuestLayout, but the home page currently isn't, that's why it isn't styled right and the navigation links aren't showing. So let's do that now. Let's import the GuestLayout at the top of the page and implement it in the body of the component. Let's see the browser again. And we have our navigation and style on both pages. However, our title is not complete. In the next lesson, we will look into fixing the title. Join me there.

Contents