Direct links to pages other than landing page break layout

Support
1

Dearest All,

I have a site (phones only).
https://mix-blender-pro.netlify.app

User clicks button and this page renders as expected:
https://mix-blender-pro.netlify.app/panel

However, if I go directly to the “/panel” page in the browser…
the styling renders as :poop:.

The repo (such as it is) is here:

I thought of two solutions:

  1. fix this problem by becoming a better developer with your kind advice as to how to render these components properly.

  2. tap into some of that sweet, sweet redirect feature magic that everyone’s talking about on this forum.

I’m, honestly, looking to do this according to best practices. #2 seems like a hacky solution.

I would be infinitely grateful for anyone’s wise counsel.

Cheers,
Beau

2

@beauhaus Your site currently isn’t loading for me. Did you take it down or is the problem on my end?

3

HI~! Thank you for checking.

Weird. It’s loading for me and a few I know. I think it’s running.

Thx again

4

After looking into this a bit…it seems that the window object is not created at build-time.

The ugly rendering of a page that paints to client upon arrival through a direct link may be caused by this.

This stackoverflow page advises using this code:

import { useEffect } from ‘react’;
import { navigate } from ‘gatsby’;

export default () => {
  useEffect(() => {
    navigate('/your-redirect/');
  }, []);
  return null;
};

I wonder whether someone might comment whether this is hacky and/or whether there might be a better solution to my problem.

I would REALLY prefer the direct URL link to
https://mix-blender-pro.netlify.app/panel

render properly…so that users can use the direct link rather than to the home page, first.
https://mix-blender-pro.netlify.app

Cheers and Thank you.

-Beau

5

I’m not sure about this, but maybe this is helpful?