I'm building a web application using a Blazor web app. The interactive render mode is set to server and interactivity location is set to "Per Page / Component".
I've integrated a ready BootStrap 5 UI template containing custom animations and Javascript. I have referenced all of the static files like .css and .js in App.razor.
The problem is that the animations and Javascript that load and work on initial start and load of application, but stop working after I use a navlink to navigate to another component. I want to know if there's a way to re-initialize the Javascript each time a page is changed without reloading the page.
I've tried wrapping all my .js into one function named initTemplateJs and calling it using IJSRuntime OnAfterRenderAsync on each page. This method works in a Blazor WASM application, but not in Blazor server. Wrapping the .js into one function and calling it using OnAfterRenderAsync even stopped loading the .js in the initial load.
I tried using statehaschanged(), but that didn't work, please help!