Absolute URLs don't work with V8 anymore.

Hi there! Have been using navigo for years with a lot of Sites I built with WordPress. I was initializing it with

const navigo = new Navigo(GLOBALS.homeUrl, false); 

GLOBALS.homeUrl being the URL that the WordPress Template Tag home_url(‘/’) would return. Later in my script I would navigate links manually:

...
navigo.navigate( url, true ); // the second parameter navigates using absolute URLs in v7, which are standard in WordPress
...

How would I do that with Navigo v8? I couldn’t find anything in the documentation. The current behavior is that the full URL is being appended to the current one when navigating a link.

Expected behavior GLOBALS.homeUrl: https://my-site.com/my-path/ Link URL: https://my-site.com/my-path/my-sub-path/ Result of navigate: https://my-site.com/my-path/my-sub-path/

Current behavior Result of navigate: https://my-site.com/my-path/https://my-site.com/my-path/my-sub-path/

See how the full URL gets appended?

[krasimir]

Exactly! Good one.

[hirasso]

Hi @krasimir , thanks for pointing out that in my use case I indeed didn’t need a fully fledged router like Navigo. This is what I went with:

// this triggers my internal application logic
const handleRoute = () => {
  const url = window.location.href;
  // ...do something with the current url. Here I reach out to the rest of my script
}
// add event handler for when using the browser UI to navigate back and forth
window.onpopstate = () => handleRoute()
// trigger the current route once on init
handleRoute()

// navigates to an URL, triggers the route
const navigate = ( url ) => {
  // bail early if the URL is already active
  if( url.split('#')[0] === window.location.href ) return false;
  // push the URL to the history
  window.history.pushState(null, '', url)
  // trigger the route manually
  this.handleRoute();
}
// adds an event listener for all internal links
document.documentElement.addEventListener('click', e => {
  const anchor = e.target.closest('a')
  if( !anchor  || !anchor.href || !anchor.matches('.link--internal') ) return;
  navigate(anchor.href)
})

Works great! And it’s so tiny 🤦‍♂️😄 …one less dependency 🥳