Blazor routing - navigating to a static page

Question

I am trying to create a Blazor app for use on a website. Most of the website will be static, and I would like this part to be served from static HTML files for client-side performance reasons. A few of the website’s pages will be rendered by the Blazor application. When prototyping this, I ran into a problem: when navigating away from the Blazor part back to the static part of the website, I get “Error: System.InvalidOperationException: 'Router' cannot find any component with a route for '/index.html'.”

The link to index.html is in the body tag of the page which contains the app, but outside of the app tag and it should be outside of Blazor’s attention. I understand that the cause of the problem is that the router can’t find the component for the route, but why is Blazor trying to find the component instead of just letting the browser to navigate away to a non-Blazor page? This link should be handled by the browser, not Blazor, I would have thought?

If you inject NavigationManager into your page and use the NavigateTo(string uri, bool forceLoad) that will do a "real" navigation, so a request will be made to the server. As long as your server returns the page you want, that should do what you want. — Peter Morris
– Peter Morris, Commented Nov 28, 2019 at 19:47

Flores · Accepted Answer · 2019-01-10 19:29:28Z

1

In the startup.cs of your site, change the app.UseBlazor() statement to:

app.Map("/bzr", child => { child.UseBlazor<Blazor.Program>(); });

And in the index.html in the wwwroot, alter the base href to:

<base href="/bzr/" />

Now anything outside of the /bzr folder will just work as a regular website.

edited Jan 10, 2019 at 19:29

answered Jan 10, 2019 at 19:14

Flores

8,9905 gold badges54 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Vitaly Over a year ago

Thank you Flores. I found your other answer to a similar question and your blog post. It appears however that your solution probably applies to an earlier version of Blazor? I have the latest version (0.7) and in the Configure method there is no app.UseBlazor() line. Also, the signature of the Configure method is Configure(IBlazorApplicationBuilder app), and the IBlazorApplicationBuilder interface does not have a Map method... Am I looking at the right place?

Vitaly Over a year ago

Hi Flores, your suggestion seems to be only applicable for a Blazor app with a server side - do you know a solution for pure client-only Blazor app? Perhaps there is a way to add mappings to the router component?

Flores Over a year ago

I'm pretty sure I've used this with client side blazor.. but that was indeed a older version..

enet Over a year ago

No, it is not an older version. And you've used it in the Configure method of the server-side Blazor (Note that I do not mean Razor Components but a Blazor client app hosted on a server, though it is also applicable to Razor Components).

enet Over a year ago

Continue... But comrade Vitaly clearly says that his application is stand alone. No server is involved. I've already suggested that he uses Absolute Uri for his links to static HTML files, and thus, I believe, let the Router understand that the link is not to a Component. True or wrong, I don't think Blazor has a solution to that yet, but I believe it can easily be hacked if you inspect the Router object and WebAssemblyUriHelper as well as the JavaScript involved

Collectives™ on Stack Overflow

Blazor routing - navigating to a static page

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related