#Flash of Not found when refreshing browser on a dynamic route

23 messages · Page 1 of 1 (latest)

regal linden
#

Hey folks, I get a flash of 'Not found' (that is the default case i've written as shown below) when refreshing browser a dynamic route.
As you can see, I am getting the id during component rendering, so i expect id to be available before the return statement.
for eg: /section/homes can be the dynamic route

  const router = useRouter();
  const id = router.query.id;

  const getSection = (id) => {
    switch (id) {
      case "homes":
        return <Homes />;
      case "grounds":
        return <Grounds />;
      case "comforts":
        return <Comforts />;
      case "location":
        return <Location />;
      case "legacy":
        return <Legacy />;
      default:
        return <div>Not found</div>;
    }
  };

  return <div>{getSection(id)}</div>;
}

export default Section;

How can I prevent this?

weary junco
#

you should check if router.isReady

#

before rendering stuff out

#

im assuming this ONLY happens on first page load or refresh

#

not when u navigate to the page via a link

regal linden
#

Thanks a lot @weary junco . Yes u r correct, it doesn't happen when navigating via link.
The docs say, i should call router.isReady only inside useeffect.
Can you please show, how can i do it?

#

This useffect method cannot prevent the momentarily flash afaik

weary junco
# 
function Section(props) {
  const router = useRouter();
  const id = router.query.id;

  const getSection = (id) => {
    switch (id) {
      case "homes":
        return <Homes />;
      case "grounds":
        return <Grounds />;
      case "comforts":
        return <Comforts />;
      case "location":
        return <Location />;
      case "legacy":
        return <Legacy />;
      default:
        return <div>Not found</div>;
    }
  };
  if(!router.isReady()) {
    return;
  }
  return <div>{getSection(id)}</div>;
}

export default Section;
#

something like that

#

I forgot if isReady is a function or not

regal linden
#

The docs say to use it inside useEffect.
So,I ve written like this:

    if (!router.isReady) return;
  }, [router.isReady]);
misty frost
#

Read the react docs first I guess

#

No point in reading the next router docs if the fundamentals those docs require aren’t there

weary junco
regal linden
weary junco
# 
function Section(props) {
  const router = useRouter();
  const id = router.query.id;

  const getSection = (id) => {
    switch (id) {
      case "homes":
        return <Homes />;
      case "grounds":
        return <Grounds />;
      case "comforts":
        return <Comforts />;
      case "location":
        return <Location />;
      case "legacy":
        return <Legacy />;
      default:
        return <div>Not found</div>;
    }
  };

  return <div>{router.isReady && getSection(id)}</div>;
}

export default Section;
#

you could try this

regal linden
#

Tried this...but still I get that momentary blank screen.
This is the reason ig:

During prerendering, the router's query object will be empty since we do not have query information to provide during this phase. After hydration, Next.js will trigger an update to your application to provide the route parameters in the query object.

The cases where the query will be updated after hydration triggering another render are:

The page is a dynamic-route.
The page has query values in the URL.
Rewrites are configured in your next.config.js since these can have parameters that may need to be parsed and provided in the query.
To be able to distinguish if the query is fully updated and ready for use, you can leverage the isReady field on next/router.

https://nextjs.org/docs/advanced-features/automatic-static-optimization

weary junco
#

but i mean you can fill it in

#

with other html

#

and have the part your waiting specifcally for have loading thing until its loaded