Raw Html Flash between route change #298
Description
React-static version 4.8.3
React version 16.0.0
The result is running the actual final build with npm run build. not npm start as it will load the dev environment loader.
Between transition of route, I experiencing this flash of raw html...
What is the cause? Is there a solution? Any hint?
NOTE: I used the styled-component example as the base code, because all my styling is load through styled-components.
in the example, I switch from /about route to /contact route. and below shows what happened.
static-config.js
import axios from 'axios'
import {content} from 'content';
export default {
getSiteProps: () => ({
siteTitle: content.site.siteName.casual,
}),
siteRoot: 'http://site.com',
getRoutes: async () => {
return [
{
path: '/',
component: 'src/containers/BlogListingPage',
},
{
path: '/about',
component: 'src/containers/AboutPage',
},
{
path: '/contact',
component: 'src/containers/ContactPage',
},
{
path: '/blogs',
component: 'src/containers/BlogPage',
getProps: () => ({
blogs: content.blogs,
}),
children: [
{
path: '/all',
component: 'src/containers/BlogListingPage',
},
...content.blogs.map(blog => ({
path: `/detail/${blog.route.name}`,
component: 'src/containers/BlogPage',
getProps: () => ({
blogRef: blog.route.name,
blog: blog,
}),
}))
],
},
]
},
}