# Normal anchor links throwing route not found errors

**URL:** <https://discourse.aurelia.io/t/normal-anchor-links-throwing-route-not-found-errors/1995>\
**Category:** Help Requests\
**Created:** [December 6, 2018, 9:58am UTC](https://discourse.aurelia.io/t/normal-anchor-links-throwing-route-not-found-errors/1995 "2018-12-06T09:58:28Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![stevies](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/stevies/32/1039_2.png) [@stevies](https://discourse.aurelia.io/u/stevies)\
**Post date:** [December 6, 2018, 9:58am UTC](https://discourse.aurelia.io/t/normal-anchor-links-throwing-route-not-found-errors/1995/1 "2018-12-06T09:58:28Z")

</div>

How do I add a normal anchor links to an Aurelia view without getting console errors from the router?

If I do:

```auto
<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:

```auto
ERROR [app-router] Error: Route not found: /myElement

```

How can I prevent that error?

---

<div class="post-metadata">

**Author:** ![stevies](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/stevies/32/1039_2.png) [@stevies](https://discourse.aurelia.io/u/stevies)\
**Post date:** [December 6, 2018, 12:02pm UTC](https://discourse.aurelia.io/t/normal-anchor-links-throwing-route-not-found-errors/1995/2 "2018-12-06T12:02:53Z")

</div>

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.

```auto
<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>

```

```auto
import {bindable} from 'aurelia-framework';

export class ErrorSummary {
  @bindable
  controller;

  jump(id) {
    const el = document.getElementById(id);
    el.scrollIntoView(true);
    el.focus();
  }
}

```

 ![06-12-00-12](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/8/85dd2200338ae7eb7e4a2a322e91b0b6654edb13.png)

---

<div class="post-metadata">

**Author:** ![khuongduybui](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/khuongduybui/32/44_2.png) [@khuongduybui](https://discourse.aurelia.io/u/khuongduybui)\
**Post date:** [December 11, 2018, 1:16am UTC](https://discourse.aurelia.io/t/normal-anchor-links-throwing-route-not-found-errors/1995/3 "2018-12-11T01:16:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [December 11, 2018, 3:26am UTC](https://discourse.aurelia.io/t/normal-anchor-links-throwing-route-not-found-errors/1995/4 "2018-12-11T03:26:17Z")

</div>

Can you try adding `router-ignore` to the anchor?

---

<div class="post-metadata">

**Author:** ![stevies](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/stevies/32/1039_2.png) [@stevies](https://discourse.aurelia.io/u/stevies)\
**Post date:** [December 11, 2018, 9:28am UTC](https://discourse.aurelia.io/t/normal-anchor-links-throwing-route-not-found-errors/1995/5 "2018-12-11T09:28:41Z")

</div>

@ [khuongduybui](https://discourse.aurelia.io/u/khuongduybui)  
The links work OK - correct elements get the focus. But I am seeing console errors.

```auto
ERROR [app-router] Error: Route not found: /myElement

```

@bigopon  
Adding `router-ignore`

```auto
<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:

```auto
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

```

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [December 11, 2018, 10:35am UTC](https://discourse.aurelia.io/t/normal-anchor-links-throwing-route-not-found-errors/1995/6 "2018-12-11T10:35:08Z")

</div>

Can you try reproduce based on this [https://codesandbox.io/s/8py714q8v8](https://codesandbox.io/s/8py714q8v8)

---

<div class="post-metadata">

**Author:** ![stevies](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/stevies/32/1039_2.png) [@stevies](https://discourse.aurelia.io/u/stevies)\
**Post date:** [December 11, 2018, 11:07am UTC](https://discourse.aurelia.io/t/normal-anchor-links-throwing-route-not-found-errors/1995/7 "2018-12-11T11:07:24Z")

</div>

Yes. See: [https://codesandbox.io/s/lyz00rkrqq](https://codesandbox.io/s/lyz00rkrqq)

Simply add a link to an input:

```auto
  <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.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [December 11, 2018, 11:35am UTC](https://discourse.aurelia.io/t/normal-anchor-links-throwing-route-not-found-errors/1995/8 "2018-12-11T11:35:46Z")

</div>

Oh I see what you meant. Please have a look here. [https://github.com/aurelia/router/issues/527](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.

---

<div class="post-metadata">

**Author:** ![stevies](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/stevies/32/1039_2.png) [@stevies](https://discourse.aurelia.io/u/stevies)\
**Post date:** [December 11, 2018, 12:06pm UTC](https://discourse.aurelia.io/t/normal-anchor-links-throwing-route-not-found-errors/1995/9 "2018-12-11T12:06:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![khuongduybui](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/khuongduybui/32/44_2.png) [@khuongduybui](https://discourse.aurelia.io/u/khuongduybui)\
**Post date:** [December 15, 2018, 1:35am UTC](https://discourse.aurelia.io/t/normal-anchor-links-throwing-route-not-found-errors/1995/10 "2018-12-15T01:35:40Z")

</div>

That makes sense. I have `fallbackRoute` set to `/home`, maybe that’s why I didn’t see any console error?

---

<div class="post-metadata">

**Author:** ![euglv](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/euglv/32/1858_2.png) [@euglv](https://discourse.aurelia.io/u/euglv)\
**Post date:** [December 23, 2019, 5:18am UTC](https://discourse.aurelia.io/t/normal-anchor-links-throwing-route-not-found-errors/1995/11 "2019-12-23T05:18:41Z")

</div>

I am having the same issue.  
But this solution is not suitable:

> [@stevies](#):
>
> click.trigger=“jump(error.propertyName)”

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.

---

<div class="post-metadata">

**Author:** ![StefanNj](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/stefannj/32/1671_2.png) [@StefanNj](https://discourse.aurelia.io/u/StefanNj)\
**Post date:** [December 25, 2019, 7:49am UTC](https://discourse.aurelia.io/t/normal-anchor-links-throwing-route-not-found-errors/1995/13 "2019-12-25T07:49:53Z")

</div>

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:

[https://codesandbox.io/s/httpsdiscourseaureliaiotnormal-anchor-links-throwing-route-not-found-errors1995-ve2kb](https://codesandbox.io/s/httpsdiscourseaureliaiotnormal-anchor-links-throwing-route-not-found-errors1995-ve2kb)

---

<div class="post-metadata">

**Author:** ![stevies](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/stevies/32/1039_2.png) [@stevies](https://discourse.aurelia.io/u/stevies)\
**Post date:** [January 1, 2020, 8:28pm UTC](https://discourse.aurelia.io/t/normal-anchor-links-throwing-route-not-found-errors/1995/14 "2020-01-01T20:28:50Z")

</div>

Very neat. Many thanks.