I'm using latest create-react-app
config and facing the issues when switching between different routes.
All my SVG
's are included in sprite file. Logically, sprite.svg file should be cached on the first-page load.
But instead, every change of route (with react-router
4) loads this file which causes flickering. Content changes instantly, but images loads with 1s lag.
Same for png
included via import
in jsx
.
From what I cant see in the console, same files download over and over again.
Live demo at http://cabin.surge.sh/ (i.e. try to change between Pricing / About pages in the header section)
Update:
The way I include SVG image - is dumb component <SvgIcon name="checkmark" />
import React, { Component } from 'react';
import sprite from '../images/sprite.svg';
export default class SvgIcon extends Component {
render(){
const { name } = this.props;
return(
<svg className={"ico ico-" + name}>
<use xlinkHref={sprite + "#ico-" + name}></use>
</svg>
)
}
}
PNG images
<img src={require(`../images/${authorImage}.png`)} srcSet={require(`../images/${authorImage}@2x.png`) + ' 2x'} alt=""/>