Using anchors tags with navigo

[finppp]

Is it possible to use tags with navigo? For example going to:
mysite,co.uk/page1#halfwayDownPage
could load page1 and jump to the div with id="halfwayDownPage"

It currently triggers a link to my notFound handler

Thanks

[krasimir]

In theory it should be possible if we don't use the hash based routing. If only the browser history api is used then the hash should be available for other stuff. However, I'm not sure how the browser reacts in this case. I mean you probably have dynamically loaded content that appears later on the page (it is not served by the backend).

[krasimir]

@finppp if you set the second parameter of the Navigo constructor to false then the hash will not be used while routing. Let me try if that works. If not can you please post an example so I can investigate.

[finppp]

Even with the second parameter as false, I still route to the notFound handler

[krasimir]

I just added a unit test for your case and it passes. Can you please try with the latest version. I remember that I worked on similar issue before so it may be fixed already.

[gingray]

@krasimir have the same issue

const router = new Navigo(null, false);

router
  .on('/account',() => {
  })
  .on('/patches',() => { console.log('patches');})
  .resolve();

if I pass url with anchor like /account#billing route does not match.

[bkempner]

Also experiencing this issue, using 5.3.1

[krasimir]

Hey @finppp, @gingray and @bkempner I found out what's causing the problem. I created the following page containing nothing but:

const router = new Navigo(null, false);

router
  .on('/account',() => {})
  .on('/patches',() => {
    console.log('patches');
  });

router.resolve();

With the following .htaccess file in there:

<ifModule mod_rewrite.c>
  Options +FollowSymLinks
  IndexIgnore */*
  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule (.*) index.html
</ifModule>

The page is under my local apache and I could access it via the following URL:

http://home.dev/Krasimir/_tests/navigo/111

When I open http://home.dev/Krasimir/_tests/navigo/111/patches#hello indeed I don't get Navigo working. I started digging into the code and realized that Navigo needs the root URL of my application/site. Which in this case is http://home.dev/Krasimir/_tests/navigo/111/ In the constructor of Navigo we pass null as a root so Navigo tries to figures out the value alone but that is always tricky and sometimes impossible. It thinks that the root is http://home.dev/Krasimir/_tests/navigo/111/patches and simply does not resolve the proper URL. Once I did:

const router = new Navigo('http://home.dev/Krasimir/_tests/navigo/111/', false);

I got everything working. So you should provide the root in order to get a proper resolving.

P.S.
I'm working on a complete Navigo rewrite and I'll make this root mandatory. It produces so many bugs over the years so it's basically pointless.

[krasimir]

There is a new version of Navigo 8.0.0-beta.1 that now has this working. For example:

URL:

http://localhost:3000/links#my-links

with the following router configuration:

const router = new Navigo("/");

router
  .on("/about", () => {
    document.querySelector("#content").innerHTML = "about";
  })
  .on("/links", () => {
    document.querySelector("#my-links").innerHTML = "links!!!";
  })
  .resolve();

and the following html tag on the page:

<a id="my-links">my links here</a>

leads to the browser scrolling to the tag and also Navigo resolving the route.

The example is here:

https://github.com/krasimir/navigo/tree/big-rewrite/examples/using-anchor-tags