How do I stop Aurelia from throwing JS Errors, when clicking in page links (Fragment Identifiers) when it sees a # in the URL & attempts to reroute?

user_3386807 0
Viewed 120

With this simple anchor link & anchor target - originally defined by Tim Berners-Lee as a HTML Fragment Identifier - is there a way to stop a false JavaScript error from appearing in Aurelia?

HTML:

<a href="#in-page-link">In Page Link</a>
...
<a name="in-page-link">The link scrolls/jumps here</a>

JavaScript Router Error #1 (Not a real error):

Error: Route not found: /in-page-link

That's a false positive error. Of course it's not found! It's an in page link! It isn't a route! That JS "error" isn't a real error.

Is there a way to suppress that error, without having to over-engineer a JavaScript solution - to measure scroll heights & adjust the page offset - simply get around the flawed Node.js design paradigm, where routers break a basic HTML feature to create regex paths AKA: routes? Why do I need to invent a JS fix for something a framework broke? If you break it, you fix it, right?

I've tried using Aurelia's router-ignore idea, but it doesn't work for links which start with hash tags. This similar SO answer doesn't work (& the 2nd line of the OP question was incorrect): How do I keep on the same page by clicking on internal anchor links, using Aurelia?

Is there a router configuration BYPASS feature, which won't try to re-route the URL to another location? I've tried using nav: false in the router configuration, but it wants a moduleId. There isn't a moduleId for an in page link target.

With a basic router configuration JSON block like this...

{
   name: 'no_redirect',
   route: ['in-page-link'],
   nav: false
}

... how do I stop either the first JavaScript error (up above) or this additional JavaScript error from appearing, considering in page links won't have nor need to use these: moduleId, redirect, navigation nor viewPort? It's just an in page link.

JavaScript Router Error #2:

Uncaught (in promise) Error: Invalid Route Config for "in-page-link": You must specify a "moduleId:", "redirect:", "navigationStrategy:", or "viewPorts:".

I'm trying to make this HTML link work, without having Aurelia throw false JavaScript errors into the console.log. Is there an easy way to do that?

<a href="#in-page-link">In Page Link</a>
...
<a name="in-page-link">The link scrolls/jumps here</a>
aurelia router html
1 Answers

I figured out a solution for my problem!

I tried getting it to work with anchor links & router-ignore, but neither of those worked out for the site that I'm building. Perhaps it's using an older version of Aurelia, which doesn't have that router-ignore feature yet? Maybe. I don't know. I didn't check.

There is an open bug for my 1st JavaScript error on GitHub. It also has an interesting router configuration in it, which would address my 2nd JavaScript error.

I've discovered a faster & simpler work-around, which other Aurelia developers might like!

I reached out to Rob Eisenberg, who was kind enough to point me to his discord.aurelia.io site. While searching it, I found an interesting work-around idea! After exploring it & the related code examples, I was able to get the 1st false JavaScript error to disappear... without having to over-engineer any browser pixel measuring logic! I really didn't want to have to write any JS scrollbar math again, using clientOffset values. Here is a good example of measuring the scrollbar height.

I have repeatedly written code like that in the past, but I wanted to avoid having to reinvent that wheel... yet again! I really wanted to figure out another way to fix this basic snag, without having to write any custom scrollbar math logic because it felt like I was writing too much code to fix a bug in the underlying framework. Other frameworks, besides Aurelia also suffer from hijacking the '#' in the URL to create routes. It appears to be a recurring issue in the Node.js community.

This fast work-around for Aurelia is super small, fast & easy to implement. Perhaps someone will enjoy this!

  1. Change <a href="#in-page-link"> to <div class="link" click.trigger="jumpDown()">.
  2. Add a method into the behind-the-scenes matching JavaScript file, which sets a boolean:
jumpDown () {
   this.linkClicked = true;
}
  1. Change <a name="in-page-link"> to <button class="btn" focus.bind="linkClicked">.
  2. Use CSS to style the link, plus add a cursor: pointer; property & hide any button styles, as desired.

So the final code would look like this:

HTML:

<div class="link" click.trigger="jumpDown()">In Page Link</div>
...
<button class="btn" focus.bind="linkClicked">The link scrolls/jumps here</button>

JavaScript:

jumpDown () {
   this.linkClicked = true;
}

CSS:

.btn {
   /* Style as desired. */
}

.link { 
   color: #0000FF;
   cursor: pointer;
   text-decoration: underline;
}

Then the original JavaScript error #1 vanishes! The link click still works! No additional router configuration is needed! Web developers look like web rockstars! The quality assurance team is happy! Problem solved!

user_33868070
Related