{"id":1526,"date":"2025-06-27T11:09:49","date_gmt":"2025-06-27T11:09:49","guid":{"rendered":"https:\/\/www.cmarix.com\/qanda\/?p=1526"},"modified":"2026-02-05T12:00:50","modified_gmt":"2026-02-05T12:00:50","slug":"how-to-use-routing-and-navigation-in-blazor","status":"publish","type":"post","link":"https:\/\/www.cmarix.com\/qanda\/how-to-use-routing-and-navigation-in-blazor\/","title":{"rendered":"How Routing Works in Blazor and How to Navigate Programmatically?"},"content":{"rendered":"\n<p>Blazor uses the @page directive to associate a component with a specific route. When a user navigates to a URL, the Blazor router searches for a component with a matching @page directive and renders it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Defining a Basic Route<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>@page \"\/create-blog\"\n&lt;h3>Create Blog Post&lt;\/h3><\/code><\/pre>\n\n\n\n<p>In this example, when a user navigates to \/create-blog, the associated component will be displayed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Supporting Multiple Routes<\/h2>\n\n\n\n<p>You can also associate multiple routes with a single component by adding multiple @page directives:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@page \"\/create-blog\"\n@page \"\/blog\/create\"<\/code><\/pre>\n\n\n\n<p>This makes the component accessible via either route.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Routing Setup in App.razor<\/h2>\n\n\n\n<p>The App.razor file configures the routing system for your Blazor application:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;Router AppAssembly=\"@typeof(App).Assembly\">\n    &lt;Found Context=\"routeData\">\n        &lt;RouteView RouteData=\"@routeData\" DefaultLayout=\"@typeof(MainLayout)\" \/>\n        &lt;FocusOnNavigate RouteData=\"@routeData\" Selector=\"h1\" \/>\n    &lt;\/Found>\n    &lt;NotFound>\n        &lt;LayoutView Layout=\"@typeof(MainLayout)\">\n            &lt;h1>Page not found&lt;\/h1>\n        &lt;\/LayoutView>\n    &lt;\/NotFound>\n&lt;\/Router><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The &lt;Router> component is responsible for URL matching.<\/li>\n\n\n\n<li>&lt;RouteView> renders the component associated with the current route.<\/li>\n\n\n\n<li>&lt;NotFound> displays fallback UI if no route matches.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Navigating Programmatically in Blazor<\/h3>\n\n\n\n<p>To navigate to a route in code (e.g., after submitting a form), use the NavigationManager service:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@inject NavigationManager Navigation\n\n&lt;button @onclick=\"NavigateToHome\">Go to Home&lt;\/button>\n\n@code {\n    void NavigateToHome()\n    {\n        Navigation.NavigateTo(\"\/home\");\n    }\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>NavigationManager.NavigateTo() is used for programmatic navigation.<\/li>\n\n\n\n<li>You can also use options like forceLoad: true to reload the page.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Summary:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use @page to map components to routes.<\/li>\n\n\n\n<li>Configure the router in App.razor.<\/li>\n\n\n\n<li>Navigate programmatically using NavigationManager.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Blazor uses the @page directive to associate a component with a specific route. When a user navigates to a URL, the Blazor router searches for a component with a matching @page directive and renders it. Defining a Basic Route In this example, when a user navigates to \/create-blog, the associated component will be displayed. Supporting [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1527,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4,3],"tags":[],"class_list":["post-1526","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dot-net","category-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/1526","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/comments?post=1526"}],"version-history":[{"count":2,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/1526\/revisions"}],"predecessor-version":[{"id":1530,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/1526\/revisions\/1530"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/media\/1527"}],"wp:attachment":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/media?parent=1526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/categories?post=1526"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/tags?post=1526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}