{"id":8360,"date":"2020-07-08T22:31:03","date_gmt":"2020-07-08T22:31:03","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=8360"},"modified":"2020-07-08T22:31:03","modified_gmt":"2020-07-08T22:31:03","slug":"blazor-routing-and-navigation","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/blazor-routing-and-navigation\/","title":{"rendered":"Blazor routing and Navigation"},"content":{"rendered":"

Routing<\/strong><\/p>\n

If you take a look at the generated pages for a Blazor application, you’ll see the following<\/p>\n

\r\n@page "\/counter"\r\n<\/pre>\n
this denotes a route to our page, i.e. http:\/\/localhost:44319\/counter. <\/p>\n
Note: When you compile your application a file is generated (see Counter.g.cs in compiled folder) and this page declaration is converted to a RouteAttribute.<\/em><\/p>\n
You can have multiple routes pointing to the same page, in this example all these routes will navigate to the same Counter.razor page <\/p>\n
\r\n@page "\/counter"\r\n@page "\/mycounter"\r\n@page "\/something"\r\n<\/pre>\n
Probably more useful is the ability to add parameters to our routes, for example<\/p>\n
\r\n@page "\/counter"\r\n@page "\/counter\/{InitialValue}"\r\n<\/pre>\n
By default InitialValue is of type string, but we can change this by using a constraint, for example<\/p>\n
\r\n@page "\/counter"\r\n@page "\/counter\/{InitialValue:int}"\r\n<\/pre>\n
Now we simply create a property in our code with the ParameterAttribute applied to it, like this<\/p>\n
\r\n[Parameter]\r\npublic int? InitialValue { get; set; }\r\n<\/pre>\n
We use a nullable int in case the value is missing. We can also have routes handling different type contraints (for example a string or on int) to mean two different things<\/p>\n
\r\n@page "\/counter"\r\n@page "\/counter\/{InitialValue:int}"\r\n@page "\/counter\/{SomeString}"\r\n<\/pre>\n
In our OnInitialized() method (part of the component life cycle) we might then set the currentCount to InitialValue.<\/p>\n
The routes are declared in our pages but the routing component itself can be found in App.razor. In this case the Router will locate the routes from the supplied AppAssembly<\/p>\n
\r\n<Router AppAssembly="@typeof(Program).Assembly">\r\n<\/pre>\n
We can also includes routes within AdditionalAssemblies, for example maybe you’ve got some reusable components with routing supplied, hence we write<\/p>\n
\r\n<Router AppAssembly="@typeof(Program).Assembly" \r\n   AdditionalAssemblies="new[] { typeof(MyComponents).Assembly }>\r\n<\/pre>\n
Navigation<\/strong><\/p>\n
If you want to navigate to other pages, we need to use the NavigationManager<\/em>. This needs to be injected into our page, using<\/p>\n
\r\n@inject NavigationManager NavManager\r\n<\/pre>\n
Now to navigate, for example when a button is click, we use the following<\/p>\n
\r\nNavManager.NavigateTo("counter\/2");\r\n<\/pre>\n
In the instance we’ll navigate to the relative URL\/page with “counter\/someData”.<\/p>\n
This works fine when navigating to other pages but if we want to navigate within a page and we’re using the component’s OnInitialized method to initialize data? <\/p>\n
Because OnInitialized is called when the page is initial loaded and because we’re already in the page, this method will not normally be called again if we navigate within the page, so we simply need to supply an extra parameter to our NavigateTo code to force the page to reload, i.e. <\/p>\n
\r\nNavManager.NavigateTo("counter\/2", true);\r\n<\/pre>\n
Note: An alternative solution ofcourse is to override the other life cycle method OnParameterSet and instead move initialization code to that method.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Routing If you take a look at the generated pages for a Blazor application, you’ll see the following @page "\/counter" this denotes a route to our page, i.e. http:\/\/localhost:44319\/counter. Note: When you compile your application a file is generated (see Counter.g.cs in compiled folder) and this page declaration is converted to a RouteAttribute. You can […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[305],"tags":[],"class_list":["post-8360","post","type-post","status-publish","format-standard","hentry","category-blazor"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8360","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=8360"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8360\/revisions"}],"predecessor-version":[{"id":8380,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8360\/revisions\/8380"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=8360"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=8360"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=8360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}