I'm kinda new to blazor, the default counter.razor works fine but when I copy it to a page like the following it desn't.
@page "/panel/counter2"@rendermode InteractiveServer<PageTitle>Counter</PageTitle><h1>Counter</h1><p role="status">Current count: @currentCount</p><button class="btn btn-primary" @onclick="IncrementCount">Click me</button>@code { private int currentCount = 0; private void IncrementCount() { currentCount++; }}As you see the problem is I've added /panel to the start of the route. The page is loaded but the button doesn't work. Chrome's console shows me this :
GET http://127.0.0.1:5039/panel/_framework/blazor.web.jsnet::ERR_ABORTED 404 (Not Found)
So I tried adding the following to my App.razor:
<base href="/" >So now the blazor problem is gone. But if I add a bootstrap to my page like following it doesn't work properly:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>Which it's working in the default Counter.razor.
Another thing I've tried is to replace _framework/blazor.web.js with /_framework/blazor.web.js in the App.razor. And remove the extra base tag. In this case Bootstrap woks fine and blazor.web.js is loaded but it has another errors like this one:
GET http://127.0.0.1:5039/panel/_blazor/initializers 404 (Not Found)It
And It's because of this code inside blazor:
const t = await fetch("_blazor/initializers", { method: "GET", credentials: "include", cache: "no-cache" })If the fetched url had a / in the beginning there wasn't a problem but it uses this relative urls without a slash at the beginning.
BS: For the bootstrap problem there is no js error shown in the console. But some classes not working like table-bordered . So I think the problem is with css.