We have a couple of components that we have rendered inside of the browser, and we did so directly by specifying the component inside of the welcome view. For example, right now, we render the search component. And that's all well and good, but typically we don't want the search to be the only thing inside of the welcome view. In fact, really what we would want to do is just take this out completely and provide the ability for users to go to /search so that we could then display our search form. Well, that is easy enough to do. Let's go to our routes/web.php file, and let's set up a route. In fact, it's going to look like a normal route.

Let's go to our routes/web.php file, and let's set up a route. In fact, it's going to look like a normal route. We're going to route the search URL to the Search component class. So it's not a controller or method on a controller, it is our component class. And that in and of itself is, well, it's not all that we need to do, but it's the first part because we see that we get an internal server error. Now, don't panic, because if we read the message, we can see that Livewire page component layout view not found, and then it gives us the name. The name of the file that it's trying to find is app.blade.php, and it is supposed to reside inside of the components/layouts folder.

The name of the file that it's trying to find is app.blade.php, and it is supposed to reside inside of the components/Layouts folder. So all we need to do is create that file, and we can do so from the command line. We'll use the Livewire command to create the layout, and that will create a file inside of views/components/layouts/app.blade.php. And if we take a look at this file, it's going to look like a normal layout, especially for a Blade component. So now that we have this file created, we can go back to the browser, and we see our search form. It doesn't look very good, but the functionality is intact.

we see our search form. It doesn't look very good, but the functionality is intact. So let's make it look like the rest of our application. All we need to do is essentially copy, well, everything. Let's copy the fonts, and the style, and the vite directive so that we can paste that after the title inside of our component layout. And then as far as the body, let's just copy everything here, because all we really need to do is add the slot for the main element. So we will replace the body, and we will add the slots right back there. So with that simple change, we can go back to the browser, we can refresh, and

So we will replace the body, and we will add the slots right back there. So with that simple change, we can go back to the browser, we can refresh, and now we have our search page. It works just like it did before. And now we have a URL that we can direct users to go in order to search the articles. But now, of course, we want to be able to view these articles individually. And we would typically do that with a link. So inside of our search view for the title, let's add an <a> element. The href is going to be, well, what we would typically want for our URL.

So inside of our search view for the title, let's add an a element. The href is going to be, well, what we would typically want for our URL. It would make sense to have articles and then the ID of that article. So we can just use that there. So if we go back and take a look here, we should see a link. And the URLs are what we would expect them to be. But of course, whenever we click on them, nothing is going to happen. Because first of all, we don't have an article component to display our articles. So let's start with that. Let's make a new Livewire component called show-article.

So let's start with that. Let's make a new Livewire component called show-article. And let's start with the markup, because that's the easiest thing to start with. So let's open up that view. And let's just keep this simple. Let's have an h2 that has some fairly large text. Let's also make that text white so that it stands out. And let's say that we'll have an article object that we can then display the title. Then we will have a div with some top margin. And this is where we will output the article's content.

Then we will have a div with some top margin. And this is where we will output the article's content. Which means that inside of the show-article class, we will need a public article object. But we need to be able to fetch the article from the database. And we know that we can do that inside of the mount hook. So that here, we can set the article to whatever we get by using the find method. But we need to know the ID of the article that we want to fetch. Because the URL is going to have /articles, but then it's going to have the ID as part of the URL.

Because the URL is going to have slash articles, but then it's going to have the ID as part of the URL. So let's first of all set up the route for this. It's going to look very similar to what we did with the search, except that it's going to say articles. And then we'll just have the ID. Of course, this isn't for the Search class. This is for the ShowArticle class. But we need to be able to get the ID from the URL. And it's easy enough to do because it is automatically passed to the mount method.

But we need to be able to get the id from the URL. And it's easy enough to do because it is automatically passed to the mount method. So this is going to get the id so that we can pass it to the find method. And then that should magically just make this work. And we can change the id. That was 25. Let's go to the article with an id of one. That works with two. Let's do seven. All of those work.

Let's do seven. All of those work. However, if we go to an ID that does not exist, well, we get an internal server error because we attempted to find an object or an Article with an ID that didn't exist. And now if we look at the message, we are trying to access the title property on null. So of course, the Article doesn't exist. But we want to avoid this particular error. So we can just say findOrFail. And that is going to automatically result in a 404 if that Article doesn't exist.

So we can just say find or fail. And that is going to automatically result in a 404 if that article doesn't exist. So great, fantastic. We now have the ability to not just display our search using its own URL, but we can now display individual articles. And that's really nice. Don't get me wrong, but I want to take this a step further. Because in a typical Laravel application, we also have the ability to use model binding inside of our controllers. And we can do the same thing for our Livewire components.

we also have the ability to use model binding inside of our controllers. And we can do the same thing for our Livewire components. So for our mount method, we will type hint that we are getting an Article. And we can just call it article. Let's type hint our property as well. And now we don't have to find or fail or anything like that, because it's going to automatically be done for us. Except that we do need to change our route. So instead of ID, let's change it to article. And we're going to end up with what looks like the same functionality.

So instead of ID, let's change it to article. And we're going to end up with what looks like the same functionality. But now we are using model binding to fetch and display that information. And so once again, if we go to an article that does not exist, we get a 404. So we can use our Livewire components as full page components. All we need to do is create a layout for our components, set up the routes to point to our component classes, and handle any kind of initialization logic inside of the mount hook.