Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

404 flashes on page refresh

See original GitHub issue

Hi @lukeed thanks for your work on this router! I’m having some trouble with 404 page not found handling and was wondering if you could point me in the right direction. Whenever I do a <kbd>Ctrl</kbd>+r to reload the page I see the 404 page flicker before loading the correct page (sometimes it doesn’t reach the correct page and just loads the 404). Here are some project details in case it’s helpful:

I have static HTML fallbacks for each page that hydrate into svelte components
The static HTML paths are in the format /about/index.html so I match the urls with trailing slashes and redirect them to the same page but without the slash in the spa (e.g. /about)
I dynamically create the routes using a data source (nodes.js)

Click to see router code

<Html {route} {node} {allNodes} />

<script>
  import Navaid from 'navaid';
  import nodes from './nodes.js';
  import Html from '../global/html.svelte';

  let route, node, allNodes;

  const getNode = (uri, trailingSlash = "") => {
    return nodes.find(node => node.path + trailingSlash == uri);
  }

  let uri = location.pathname;
  node = getNode(uri);
  if (node === undefined) {
    node = getNode(uri, "/");
  }
  allNodes = nodes;

  function draw(m) {
    node = getNode(uri);
    if (node === undefined) {
      // Create a placeholder node so props are complete
      node = {
        "path": "/404",
        "type": "404",
        "filename": "404.json",
        "fields": {}
      }
    }
    route = m.default;
    window.scrollTo(0, 0);
  }

  function track(obj) {
    uri = obj.state || obj.uri;
  }

  addEventListener('replacestate', track);
  addEventListener('pushstate', track);
  addEventListener('popstate', track);

  const router = Navaid('/', () => import('../content/404.js').then(draw));

  allNodes.forEach(node => {
    router.on(node.path, () => {
      // Check if the url visited ends in a trailing slash (besides the homepage).
      if (uri.length > 1 && uri.slice(-1) == "/") {
        // Redirect to the same path without the trailing slash.
        router.route(node.path, false);
      } else {
        import('../content/' + node.type + '.js').then(draw);
      }
    }).listen();

  });

</script>

Thanks!

Issue Analytics

State:
Created 3 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

jimafiskcommented, May 1, 2020

Ah yes of course, you are 100% correct! Thanks so much for the quick response, it’s working beautifully now.

Also thanks for the demo link, I was using that as a model with some modifications to fit my app. Here’s a link in case you’re interested in seeing different places that are using Navaid in action: https://github.com/plentico/plenti

1reaction

lukeedcommented, May 1, 2020

Hi there,

You are calling .listen() inside your allNodes.forEach loop. I imagine something like this is happening:

// Assume we're on home page ("/")

allNodes = [
  { path: '/foobar' },
  { path: '/hello' }
  // ...
]

allNodes.forEach(node => {
  router.on(node.path, ...);
  // Router ONLY has "/foobar" right now
  router.listen(); 
  // ^ AKA: "please match {{ current location }} against all known routes ("/foobar")
  // -> NOT a match, load 404
})

Does that sound about right?