Mixing Blazor and MVC pages in one app

So, you have this MVC app that you want to convert to Blazor. But you can't do this in one big bang, simply because it's too much work.

One approach would be to convert some pages to Blazor and leave some in their 'old' MVC style, and of course you want this in one project. But how do you get this to work? Bacause when navigating from Blazor if the route is not found in a Blazor page it will throw a (client side) exception like this:

Uncaught Error: Microsoft.AspNetCore.Blazor.Browser.Interop.JavaScriptException: System.InvalidOperationException: 'Router' cannot find any component with a route for '/nonexistingroute'

So how do I navigate from Blazor to a MVC page then? The solution I found is to host Blazor in a subfolder of the site. How to do this is not very well documented, so I'm doing that here.

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/" />

(That last slash is important) Simple and effective. Now you can navigate from Blazor to any MVC page in the same app and the other way around.

Hope this helps.