Gatsby dynamic routing flash of a page before content loads

[tpszhao]

Hello,

My company is trying to achieve the following with the gatsby project.

1. When the user visits /projects, it would take them to a list of project, each linking to a single project page
2. When the user visit /projects/:projectId, it would display a single project page for that specific id
3. The /projects page has infinite scrolling, if the user navigates to a single project link and hits the back button, the infinite scrolling should be preserved. (e.g 200 projects loaded through infinite scrolling, the users clicks a single project link and comes back, the infinite scrolling should not be reset to 0)

This is our component

const ProjectsPage = ()=>{

//this hook handles everything required for infinite scrolling such as fetchMore, hasMore, etc
const projectListProps = useProjects()


return 
(<Router basepath="/projects">
    <SingleProjectPage path="/"projectId">
    <ProjectsListPage path="/" projectListProps ={projectListProps }/>
<Router />)
}
export default ProjectsPage

Here is how we are building the client-side routes

createPage({
      path: `/projects`,
      component: path.resolve(`./src/templates/projectsPage.js`),
      matchPath:`/projects/*`
    })

Here is a problem we have
If the user navigates to the /projects/some-id directly (or do a hard refresh), then a flash of the ProjectsListPage appears. This is the expected behaviour due to our matchPath property above.

But is there a way to prevent that flash, because ProjectsListPage and SingleProjectPage have different layouts.

[frapsMatheus]

I'm having a similar issue. I'm creating the page the same way as you and the website flashs my index.js page before loading the correct one. I'm not using the router since I have the same behavior creating the pages separately. Probably if you try separating the logic into two separate pages and without the router you will still have the issue since it happens to me to.

http://site2.simplicode.com.br/aula/p2p

gatsby-node.js

const path = require(`path`)
exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  createPage({
    path: "/aula/*",
    matchPath: '/aula/:id',
    component: path.resolve(`src/pages/aula.js`),
  });
}

pages/aula.js

import React from "react"

import SEO from "../components/seo"
import App from '@aulas-colmeia/videochat';
import logo from '../images/logo_purple_horizontal.png';

function Video({ location }) {
  return <div style={{height: '100%'}}>
    <SEO title="Simplicode - Vídeo Aula" />
    <App />
  </div>;
}

export default Video;

pages/index.js

import React, { useRef } from "react"
import ReactGA from 'react-ga';

import "../components/Layout/layout.css"
import SEO from "../components/seo"
import Main from "../components/InfoComponents/Main/Main"
import Header from "../components/Layout/Header/Header";
import Footer from "../components/Layout/Footer/Footer"

import WhyStudy from "../components/InfoComponents/WhyStudy/WhyStudy";
import OurCourses from "../components/InfoComponents/OurCourses/OurCourses";
import HowAreTheClasses from "../components/InfoComponents/HowAreTheClasses/HowAreTheClasses";
import SubscriptionPlan from "../components/InfoComponents/SubscriptionPlan/SubscriptionPlan";
import Contact from "../components/InfoComponents/Contact/Contact";
import ScheduleLesson from "../components/InfoComponents/ScheduleLesson/ScheduleLesson";

function IndexPage({ location }) {
  function redirect() {
    const uri = '/form' + location.search;
    window.location.replace(uri);
  }
  return <>
      <div style={{
        textAlign: 'center',
        height: 'inherit',
      }}>
      <Header />
      <SEO title="Simplicode" />
      <Main redirect={redirect}/>
      <WhyStudy />
      <OurCourses />
      <HowAreTheClasses />
      <SubscriptionPlan redirect={redirect}/>
      <ScheduleLesson redirect={redirect}/>
      <Contact />
      <Footer />
    </div>
  </>
}

export default IndexPage

[tpszhao]

Thanks @matrpedreira

This is probably going to fail on a windows because it doesn't allow directory names with *, the action below intends to create

/aula/*/index.js

const path = require(`path`)
exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  createPage({
    path: "/aula/*",
    matchPath: '/aula/:id',
    component: path.resolve(`src/pages/aula.js`),
  });
}

[frapsMatheus]

Changing to use the code on gatsby-node.js exactly like yours keeps the same behavior.

const path = require(`path`)

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  createPage({
    path: "/aula",
    matchPath: '/aula/*',
    component: path.resolve(`src/pages/aula.js`),
  });
}

[frapsMatheus]

I found this solution on another issue. It fixes the problem.
#5329 (comment)