URL Changes content keeps the same

[Andrés Clúa]

Hello everyone,

I've successfully created around 4 or 5 websites using Swup, so I've encountered and overcome most of the common issues associated with it. However, I'm currently working on a much larger project, and I'm facing a new challenge.

The problem I'm experiencing occurs when I navigate between pages on the site. Sometimes, when I click the back arrow (browser) to return to the previous page, the URL changes as expected, but the page content does not update. This issue seems to happen sporadically, and it resolves itself if I don't initialize Swup.js.

Any insights or suggestions on how to address this issue would be greatly appreciated.

https://streamable.com/a3vv7h <- video

https://codesandbox.io/p/github/andresclua/vlrx-clone/main?workspaceId=138605fe-a185-46bd-9550-479e93c08fe6

this.swup = new Swup({
      linkSelector: "a[href], area[href], svg a[*|href]",
      plugins: [
        new SwupHeadPlugin(),
        new SwupScriptsPlugin({
          head: true,
          body: true,
        }),
        new SwupDebugPlugin({
          globalInstance: true,
        }),
        new SwupJsPlugin(transitionOptions),
        new SwupGtmPlugin(),
      ],
    });

[Philipp Daun]

Any chance you could make the CodeSandbox public temporarily? I'm getting an error "Unable to access this workspace. To be able to access the web editor of this repository and edit the code, you need to be invited to the team."

[Philipp Daun]

Are you modifying the history state using pushState or replaceState yourself, by any chance? In that form, maybe? That would cause swup to just silently ignore any history entries that it doesn't recognize as its own. You'd need to use the provided createHistoryRecord helper to create history entries swup will deal with.

[Andrés Clúa]

Hello @daun!

It's true, @NereaFontecha and I, learn something new every day. Just as you mentioned, I found that using createHistoryRecord was the way to go.

Thank you so much for the valuable tip!

[Andrés Clúa]

Thanks!

[Philipp Daun]

Glad you got it working!

[Philipp Daun]

By the way, feel free to add your sites to this discussion: Sites using swup. We're planning on creating an actual showcase on the website and always looking for inspiration :)