Redirecting After Actions0:00
Redirection is a seemingly simple concept, but it is very important, because it of course allows us to redirect the user to, well, wherever we want them to go. And of course, we don't abuse that power. Or do we? No. We don't. But most of the time, we redirect the user after they have done something. Like in this case, instead of our createArticle component, we redirect the user back to our articleList. And we do so in the most straightforward way.
Redirecting by Route Name0:35
article list. And we do so in the most straightforward way. We provide the URL, and that works just fine. But we can also redirect based upon the route. So let's give our article list a name. And ideally, we would provide a name for all of these. But this is going to be just fine. And we'll call this dashboard.articles.index. So that's back inside of our CreateArticle component. Instead of redirecting to a URL, we will call the redirectRoute method.
So that's back inside of our CreateArticle component. Instead of redirecting to a URL, we will call the redirect()->route() method. Then we just specify the name of the route that we want to redirect to. And if we want to include the navigate parameter, we can. And let's do that. We'll set that to true. So that now, whenever we go to CreateArticle, let's have the title of redirect to route. And this will redirect. Let's also make this published. If I could type this redirect, there we go.
Let's also make this published. If I could type this redirect, there we go. We'll make it published. We'll save it. And of course, it redirects back to our article list. But we can also redirect to a full page component, which our article list is a full page component. In which case, this is the EditArticle component. Whenever we save or update an Article, we redirect. But in this case, we are going to redirect to the ArticleList component.
Redirecting to Component1:51
Whenever we save or update an Article, we redirect. But in this case, we are going to redirect to the ArticleList component. All we need to do is provide the name of the class of that component. And that will redirect. Once again, let's also use the navigate parameter. We'll set that to true. And then let's find that Article that we just created. Let's edit it. And we will change the name to redirect to FullPageComponent. And whenever we save, we will redirect back to our ArticleList.
Adding Flash Status Message2:15
And we will change the name to redirect to full page component. And whenever we save, we will redirect back to our article list. But you know, it would be nice to have a status message, just to tell the user, hey, that article was updated. And we can do that. So after we update the article, let's use our session and we'll call flash. We want a status message and we'll just say article successfully updated. And then inside of our article list view, we want to display that message. And let's do this before the links for changing the pages. So we'll add an if statement here for session has a status.
And let's do this before the links for changing the pages. So we'll add an if statement here for session has a status. Then we will have a div element. Let's center the text. We'll give it a green color of 700 and the text gray, what did we use? I think it was 200. Yes, the text will be gray 200. And then here we will simply display our status message from our session. Let's close out that if directive and yeah, that should work. So let's once again find our new article.
Let's close out that if directive and yeah, that should work. So let's once again find our new article. Let's edit. We'll say redirect to full page component with status or let's say with flash message. We'll save it and there we have our status message. So that's three ways that we can redirect the user. We can call the redirect method and pass in the URL and voila. We have redirected the user. We can also redirect to a full page component by just
Intended Redirects for Auth3:51
We have redirected the user. We can also redirect to a full page component by just passing the name of the class of that component to the redirect method. We can also redirect to a specific route by calling redirect()->route() and then passing in the route name. But then there's also one more way that we can redirect users, but it is used in very specific circumstances. Like for example, let's assume that you want to go and create an Article. So you go to that URL, but you're not signed in. So we redirect you back to the sign in page.
So you go to that URL, but you're not signed in. So we redirect you back to the sign in page. You authenticate and then we redirect you back to the create page. It's very common and in the world of Laravel, we call that an intended redirect. It works by storing the original URL, the create page in the session, so that after you authenticate, we can get that URL and we can actually redirect you there. Livewire gives us the ability to also redirect with intended and it's called redirectIntended. If we don't pass any arguments to this method,
it's called redirectIntended. If we don't pass any arguments to this method, then it is going to attempt to redirect to the original URL. And if that setting is in the session, then everything's fine. But if it's not, then it redirects back to the root of our application. And that might not be the behavior that we want. So instead, we can also provide an optional default URL. So in this case, if we wanted to redirect the user back to the dashboard after they had signed in, then we could do that by passing /dashboard. But again, redirectIntended is primarily used
after they had signed in, then we could do that by passing /dashboard. But again, redirect()->intended() is primarily used almost exclusively during authentication. Yes, there are times that we would use it outside of that workflow, but 99% of the time, it's for authentication. So just be aware that that's there. Be safe out there. And thanks for watching Doctor Who Livewire. Be well. Bye for now.
Be well. Bye for now.
