oqtane
[BUG] anchor link doesn't work on pages
Oqtane Info
Version - 5.1.2 Render Mode - Static Interactivity - Server Database - SQL Server
Describe the bug
anchor link doesn't work on pages because there is base tag pointed to home page: https://github.com/oqtane/oqtane.framework/blob/d449396ad59b1dde6af0b59242f860d05733557e/Oqtane.Server/Components/App.razor#L41
Expected Behavior
the anchor link should link to the anchor on the page.
Steps To Reproduce
- add html module on the page and edit with below content:
<a href="#test">Click Me</a>
<a id="test"></a>
<h1>Test me!</h1>
- click on the link.
@zyhfish we can't change the base tag as there are a variety of things which depend on it. Have you tried to specify the hyperlink as "/#test"? Have you tested to see if anchors work when navigating from a different page? I have a feeling that this issue is isolated to the home page which has a path of "/". For example on https://www.oqtane.org the menu is using anchors for various sections on the page ie. #about #features #showcase and it works fine.
Hi @sbwalker , the problem is anchor links on all other pages which link to home page.
@zyhfish if I am on the Blog page (https://www.oqtane.org/blog) and click on the About link in the menu (which links to the home page with path "/" and anchor #about) it works fine.
Hi @sbwalker , yes, that because the link is really want to link to the home page.
If you try to add a new blog with below content:
<a href="#test">Click Me</a>
<a id="test"></a>
<h1>Test me!</h1>
when click on the link, the expected behavior is scroll the page to the anchor, but the actually result is page will be redirected to the home page.
@zyhfish so the simple solution is if you want to link to an anchor, include the relative page path in the hyperlink:
<a href="/path#test">Click Me</a>
Yes, but the content editors will be confused and becomes hard to maintenance the content. for example if they have Table of contents on the page which contains many anchor links, then if the page path been changed, they have to modify all the links to update the path.
Blazor requires the specification of <base href="/" /> (https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/?view=aspnetcore-8.0&tabs=visual-studio#app-base-path) which causes issues with naked anchor tags (ie. "#anchor"). This problem is actually not specific to Blazor - it is a problem with many SPA frameworks, as many of them require a base href. There is no technical solution that I am aware of to resolve this as the browser will automatically prefix anchors with the base href value - which means the router will receive a value of "/#anchor" without any additional context of what the original page path was where the hyperlink was located. Without this context, the router parses the url and determines that the path is "/" - which in Oqtane is generally the home page path. So the only real solution is for content authors to include the page path in their hyperlink anchor specification (ie. "path#anchor").