Redirecting
Redirect users to different pages or external URLs from your component actions. CBWIRE provides the redirect()
method with options for traditional page redirects or single-page navigation using wire:navigate
.
Basic Usage
// wires/UserDashboard.bx
class extends="cbwire.models.Component" {
data = {
"isLoggedIn": false
};
function logout() {
// Perform logout logic
data.isLoggedIn = false;
// Redirect to login page
redirect("/login");
}
function goToProfile() {
// Navigate to profile using wire:navigate (SPA-style)
redirect("/user/profile", true);
}
function visitExternal() {
// Redirect to external URL
redirect("https://example.com");
}
}
<!-- wires/userDashboard.bxm -->
<bx:output>
<div>
<h1>User Dashboard</h1>
<bx:if isLoggedIn>
<button wire:click="logout">Logout</button>
<button wire:click="goToProfile">View Profile</button>
<bx:else>
<p>Please log in to continue.</p>
</bx:if>
<button wire:click="visitExternal">Visit Example Site</button>
</div>
</bx:output>
Redirect Types
Internal Pages
Redirect to pages within your application:
redirect("/dashboard");
redirect("/users/123");
redirect("/admin/settings");
External URLs
Redirect to external websites:
redirect("https://google.com");
redirect("https://github.com/user/repo");
Wire Navigate
Use wire:navigate
for SPA-style navigation without full page reloads:
redirect("/dashboard", true);
This creates a faster, single-page application experience by only updating the page content without refreshing the entire browser window.
Redirects immediately terminate action execution. Any code after a redirect()
call will not execute.
Last updated
Was this helpful?