How do I add a normal anchor links to an Aurelia view without getting console errors from the router?
If I do:
<a href="#myElement">Jump to element</a>
...
<input id="myElement">
Then the link works, and the input field gets focus - but I get a console error:
ERROR [app-router] Error: Route not found: /myElement
How can I prevent that error?
Appears I can do it with JavaScript. Not sure if this is ideal, but it seems to work.
In this case, I am linking to an input element from an error message in a block at the top of the view.
<template>
<ul class="error-block" if.bind="controller.errors.length">
<li repeat.for="error of controller.errors">
<a href="#" click.trigger="jump(error.propertyName)">${error.message}</a>
</li>
</ul>
</template>
import {bindable} from 'aurelia-framework';
export class ErrorSummary {
@bindable
controller;
jump(id) {
const el = document.getElementById(id);
el.scrollIntoView(true);
el.focus();
}
}
This is weird. I cannot reproduce your issue.
Here’s my HTML:
<a href="#test1">Test 1</a>
<a href="#test2">Test 2</a>
(a bunch of <br>)
<div id="test1">Test 1</div>
<input id="test2">
When I click Test 1 link, it scrolls to Test 1 div.
When I click Test 2 link, it scrolls to and focuses Test 2 input.
Note: I’m using skeleton generated with latest CLI.
Can you try adding router-ignore to the anchor?
@ khuongduybui
The links work OK - correct elements get the focus. But I am seeing console errors.
ERROR [app-router] Error: Route not found: /myElement
@bigopon
Adding router-ignore
<template>
<ul class="error-block" if.bind="hasErrors">
<li repeat.for="error of controller.errors">
<a href="#${error.propertyName}" router-ignore>${error.message}</a>
</li>
</ul>
</template>
did not work - still seeing:
aurelia-logging-console.js?dc89:47 ERROR [app-router] Error: Route not found: /surname
at AppRouter._createNavigationInstruction (aurelia-router.js?e32b:1097)
at AppRouter.loadUrl (aurelia-router.js?e32b:1707)
at BrowserHistory._loadUrl (aurelia-history-browser.js?d627:293)
at BrowserHistory._checkUrl (aurelia-history-browser.js?d627:286)
error @ aurelia-logging-console.js?dc89:47
(anonymous) @ aurelia-logging.js?30fd:38
(anonymous) @ aurelia-router.js?e32b:1710
tryCatcher @ bluebird.js?f684:5276
Promise._settlePromiseFromHandler @ bluebird.js?f684:3297
Promise._settlePromise @ bluebird.js?f684:3354
Promise._settlePromise0 @ bluebird.js?f684:3399
Promise._settlePromises @ bluebird.js?f684:3475
(anonymous) @ bluebird.js?f684:175
(anonymous) @ bluebird.js?f684:4530
attributes (async)
(anonymous) @ bluebird.js?f684:4516
attributes (async)
scheduleToggle @ bluebird.js?f684:4524
schedule @ bluebird.js?f684:4533
Async.settlePromises @ bluebird.js?f684:174
Promise._reject @ bluebird.js?f684:3442
Promise._settlePromise @ bluebird.js?f684:3369
Promise._settlePromiseCtx @ bluebird.js?f684:3391
(anonymous) @ bluebird.js?f684:165
(anonymous) @ bluebird.js?f684:4530
attributes (async)
(anonymous) @ bluebird.js?f684:4516
attributes (async)
scheduleToggle @ bluebird.js?f684:4524
schedule @ bluebird.js?f684:4533
Async.invoke @ bluebird.js?f684:164
Promise._then @ bluebird.js?f684:3046
Promise.then @ bluebird.js?f684:2910
loadUrl @ aurelia-router.js?e32b:1707
_loadUrl @ aurelia-history-browser.js?d627:293
_checkUrl @ aurelia-history-browser.js?d627:286
Can you try reproduce based on this https://codesandbox.io/s/8py714q8v8
Yes. See: https://codesandbox.io/s/lyz00rkrqq
Simply add a link to an input:
<a href="#surname">Go to surname field</a> <br /><br />
<input type="text" id="surname" />
Click the link - see the console error.
Also, in the test case, the link does not work - input does not get the focus. That works OK in my own code. Maybe the test is busted because no <base href="/"> in the <head> or something like that.
Oh I see what you meant. Please have a look here. https://github.com/aurelia/router/issues/527
Currently ignoring unknown route is still a feature request. Probably will be tackled in 2.0 beta-x.
Yes - I figured there was some bug/missing feature. I got around it with just calling a jump function - not ideal, but better than generating errors.
Thanks for looking at this.
That makes sense. I have fallbackRoute set to /home, maybe that’s why I didn’t see any console error?
I am having the same issue.
But this solution is not suitable:
It will not change the current url. And it will not work to display something on another route. And it will not work when you open the url with hash mark in a new window.
You can call method by clicking the anchor link and set surnameFocused to true. Then bind surnameFocused to focus attribute of input element .
See example here:
Very neat. Many thanks.