menu

React Static

A fast, lightweight, and powerful framework for building static-progressive React applications and websites.

Channels
Team

Dynamic Routes work but show 404 in console

March 12, 2019 at 9:42pm

Dynamic Routes work but show 404 in console

March 12, 2019 at 9:42pm (Edited 3 months ago)

I like the idea of having a subset of dynamic routes for pages that don't need to be statically built, in my case, a careers/job listings board.

Almost all other pages on the site are defined in static.config, including the careers page.

Goal: Static route - website.com/careers Dynamic routes - website.com/careers/:id

From what I can tell from the dynamic routes with reach router guide, the app level component should wrap all dynamic routes and React-Static's Routes component in a Router component. Here's a snippet from my app level component.

...
<div className='content'>
<Router>
<JobPageTemplate path='careers/:id' />
<Routes default />
</Router>
</div>
...

Then I use Reach Router's Link component on the static rendered careers page.

<Link to={\/careers/${job.id}`}>{job.text}</Link>`

The dynamic routes work as expected in dev and prod, but when I open the console, I get a 404 error for each link to a dynamic route visible in the viewport. As a scroll down my list of job links, a new 404 error pops up when it becomes visible.

GET http://localhost:3000/__react-static__/routeInfo/careers/5eeeba0c-4a40-4fad-8b78-0df7bc89d36e 404 (Not Found)

I'm not sure if I'm doing something wrong or if it's a bug. @tannerlinsley have you seen this before? Is there something I can do to avoid the "false" 404 errors?


March 14, 2019 at 8:39pm

We might be able to expose a way for you to whitelist a dynamic route or group of routes to not make the routeInfo requests.

  • reply
  • like

The 404 errors as of right now are not harmful, they are simply a means by which RS checks to see if a path is in fact a static path

  • reply
  • like

March 15, 2019 at 2:55am

Yeah, it seems like a user might not notice, but having that many console errors on a production site doesn't sit well with me. I actually avoided this by using query parameters and a static shell page.

Edited
  • reply
  • like

It would be great to have a way to whitelist or explicitly designate dynamic routes in RS and avoid the false 404s.

Loving React Static BTW. How can I get my site on the list of sites made with RS?

  • reply
  • like

March 19, 2019 at 11:19am

The prefetching is based on the (visible) links on the page, so I believe you should be able fix this by setting prefetch="false" on any links to dynamic pages

  • reply
  • like

@bram-l, we also have a prefetch runner that works on any <a href> link that becomes visible on the page. With that said, I think a whitelist is the way to go. You would return it in your config, same as routes. It would probably need to support globs too. Or at the very least, regex.

  • reply
  • like

@tannerlinsley Looking at this I would say it won't prefetch any links with the prefetch="false" attribute, or are you referring to something else?

  • reply
  • like

April 2, 2019 at 5:08pm

In v7, you can now import { addPrefetchExcludes } from 'react-static' and do addPrefetchExcludes(['my-dynamic-route'])

  • reply
  • like

This will exclude react-static's runtime from trying to fetch routeInfo for any routes that start with my-dynamic-route

  • reply
  • like

you can also pass a regex

  • reply
  • like