SolidJS•5mo ago

<A> Component: #id Breaking Link

I'm building a docs page for a project I'm working on. If I create a link with a fragement id pointed to a div on the same page, everything works as expected. The page scrolls to the element with the appropriate id.

|<A href="#section1">Link to section 1</A>

// One the same page
<div id="section1">...</div>

|<A href="#section1">Link to section 1</A>

// One the same page
<div id="section1">...</div>

But, if I link to another page, nothing happens. I click the link and it doesn't navigate.

|<A href="/to/another/page#section1">Link to section 1</A>

// On another page
<div id="section1">...</div>

|<A href="/to/another/page#section1">Link to section 1</A>

// On another page
<div id="section1">...</div>

Is there an easy fix for this?

2 Replies

Madaxen86•5mo ago

Should work just fine: https://stackblitz.com/edit/github-grada5-xue3np?file=src%2Fapp.tsx Do you use the latest version of solid router?

ChrisThornhamOP•5mo ago

I'm on 0.14.1 I solved it. I had some custom navigation and scrolling logic built for the docs site that was breaking things. @Madaxen86 Thanks for the example. That helped me confirm it wasn't the router.

Gaming

Programming

<A> Component: #id Breaking Link