Issue with dynamic routes #3

jesperlandberg · 2018-05-22T10:21:47Z

Hi,

Thanks for this barba alternative=)

Currently testing it out but I'm having one issue. Links to Dynamic pages (Wordpress single pages) doesn't work properly. It works the first click/entry after a page refresh, but going between pages and then trying to enter a dynamic route causes a hard refresh. Any idea why?

JS

import '../css/app.scss'

import Highway from '@dogstudio/highway'

// Renderers
import Home from './home'
import Location from './location'

(() => {
	const links = [...document.querySelectorAll('.js-site-head__menu-link')]

	const H = new Highway.Core({
		renderers: {
			home: Home,
			location: Location
		},
		transitions: {

		}
	})

	H.on('NAVIGATE_IN', (from, state) => {
		for (const link of links) {
		  link.classList.remove('is-active')

		  if (link.href === state.url) {
		    link.classList.add('is-active')
		  }
		}
	})
})();

Single renderer:

import Highway from '@dogstudio/highway'
import Smooth from '../scroll'

let smooth

class Location extends Highway.Renderer {
	onEnter() {
		smooth = new Smooth()

		smooth.init()
	}
	onLeave() {
		smooth.destroy()
	}
	onEnterCompleted() { }
	onLeaveCompleted() { }
}

export default Location

Single page file (twig templating)

{% extends "base.twig" %}
{% block content %}
<article router-view="location" class="o-scroll js-scroll">
	<div class="o-scroll__content js-scroll__content">

	</div>
</article>
{% endblock %}

The text was updated successfully, but these errors were encountered:

Anthodpnt · 2018-05-23T21:56:54Z

@jesperlandberg

I'm not sure to understand.
When you click a link to a single page from Wordpress the window reload happens ?
Do you have any error in the console ?

From what I see in your code you don't have any transition provided to Highway.
This could lead to some sort of hard refresh.

If you don't see the window reloading on click on your links but only the URL being updated this means Highway does his job and you might just need to provide a default transition for your pages. Otherwise I'll need more information (logs, errors,...) in order to help you.

Thanks,
Anthodpnt

Anthodpnt · 2018-05-23T22:42:39Z

@jesperlandberg Do you have the router-wrapper as well in you HTML ?

jesperlandberg · 2018-05-24T07:38:22Z

@Anthodpnt the issue is with pages that have dynamic slugs, /:id for example. All pre defined pages works fine, but dynamic ones like blog posts and such seem to have issues.

The issue for me (and a friend @westwho is also trying out highway) seem to be that the second time we click a link to a blog post or dynamic page, a hard load of the pages happen.

"loads the site" -> clicks and enter blog post (works fine) -> goes back to home page -> clicks any blog post again (this time causing a hard load).

There are no errors show in the console or other logs.

I will try put it up on a test server for you to see later today.

Here is a little video showcasing the issue:
highway.zip

deJong · 2018-05-24T07:48:05Z

In addition to @jesperlandberg, there is always a hard refresh of the page once a link is loaded dynamically in the router view and clicked.

The transition works, but after about 100ms there is still a hard refresh.

Simple example:

<body>
   <main router-wrapper>
      <article router-view>

        <ul class='nav'>
         <li>
          <a href='#'>link</a> <!-- works when page is loaded normally but not when loaded by router view --!>
         <li>
        </ul>

      </article>
  </main>
</body>

Anthodpnt · 2018-05-24T07:53:40Z

@jesperlandberg @deJong,

Thanks for your feedback!
I'll run some tests on my side and come back to you ASAP with a fix.

jesperlandberg · 2018-05-24T10:15:21Z

@deJong yeah, exactly the problem I tried to explain haha, you did it better=)

Anthodpnt · 2018-05-24T14:42:42Z

@jesperlandberg @deJong

Ok I see, should be an issue with event binding.
Will check it and come back to you.

Thanks again !

Anthodpnt · 2018-05-24T15:05:10Z

@jesperlandberg @deJong

Should be fixed in v1.3.4.
The binding of the click event on links was triggered too soon...

Can you please update your package and tell me if this solves your issue please ?

Thanks a lot,
Anthodpnt

jesperlandberg · 2018-05-24T15:44:09Z

@Anthodpnt I'm afraid the issue still remains for me=/

Anthodpnt · 2018-05-24T18:10:09Z

@jesperlandberg

Did you update your package.json and node_modules, and rebuild your scripts ?
Links in router-view shouldn't trigger a hard refresh anymore...

The problem came from these lines:

// Now we show our content!
await this.To.show();

// Bind events
this.bind();

The bind method in charge of handling the click event on links in the router-view was called before the show method of the new page's renderer was called so basically the links were not collected and the click event wasn't bound properly.

I updated the basic-setup example top make sure it was working by adding links in the router-view elements and it solved the issue explained by @deJong that is apparently the same as yours...

Anthodpnt

jesperlandberg · 2018-05-24T18:20:37Z

@Anthodpnt My mistake. I ran a command to update my package.json, which displayed 1.3.3 -> 1.3.4 ... but now I saw it didn't actually update my package file for some reason.

However, it seems to work fine now=) Thanks for the quick update!

Anthodpnt · 2018-05-24T18:27:52Z

Ok perfect !
I'll wait for @deJong news before closing this issue.

Thank you for your helpful feedback!
Anthodpnt

deJong · 2018-05-25T07:21:05Z

Works like a charm @Anthodpnt 🔥. Thanks for the quick solution.

Anthodpnt · 2018-05-25T11:24:52Z

@deJong @jesperlandberg

Ok perfect! I'll close the issue then.
Don't hesitate to share Highway.

Anthodpnt

Anthodpnt closed this as completed May 25, 2018

Anthodpnt self-assigned this Jun 9, 2018

Anthodpnt added the bug Something isn't working label Jun 9, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue with dynamic routes #3

Issue with dynamic routes #3

jesperlandberg commented May 22, 2018 •

edited

Loading

Anthodpnt commented May 23, 2018 •

edited

Loading

Anthodpnt commented May 23, 2018

jesperlandberg commented May 24, 2018 •

edited

Loading

deJong commented May 24, 2018 •

edited

Loading

Anthodpnt commented May 24, 2018

jesperlandberg commented May 24, 2018

Anthodpnt commented May 24, 2018

Anthodpnt commented May 24, 2018

jesperlandberg commented May 24, 2018

Anthodpnt commented May 24, 2018

jesperlandberg commented May 24, 2018

Anthodpnt commented May 24, 2018

deJong commented May 25, 2018

Anthodpnt commented May 25, 2018

Issue with dynamic routes #3

Issue with dynamic routes #3

Comments

jesperlandberg commented May 22, 2018 • edited Loading

Anthodpnt commented May 23, 2018 • edited Loading

Anthodpnt commented May 23, 2018

jesperlandberg commented May 24, 2018 • edited Loading

deJong commented May 24, 2018 • edited Loading

Anthodpnt commented May 24, 2018

jesperlandberg commented May 24, 2018

Anthodpnt commented May 24, 2018

Anthodpnt commented May 24, 2018

jesperlandberg commented May 24, 2018

Anthodpnt commented May 24, 2018

jesperlandberg commented May 24, 2018

Anthodpnt commented May 24, 2018

deJong commented May 25, 2018

Anthodpnt commented May 25, 2018

jesperlandberg commented May 22, 2018 •

edited

Loading

Anthodpnt commented May 23, 2018 •

edited

Loading

jesperlandberg commented May 24, 2018 •

edited

Loading

deJong commented May 24, 2018 •

edited

Loading