'React splash screen image broken on some routes

I have created a splash screen for my Create React App, however it is very buggy.

Here is my index.html (minus some default meta code):

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            height: 100vh;
            width: 100%;
            background: radial-gradient(200% 100% at top, #292d60 0%, #070B33 80%);
            overflow: hidden;
        }

        @keyframes fadein {
            0% {
                opacity: 0;
                transform: translateY(-10px) scale(1.1);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        #splash-logo, #splash-logo-react {
            position: fixed;
            width: 500px;
            max-width: 50%;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto auto;
        }

        #splash-logo {
            z-index: -1;
            animation: fadein 0.5s
        }

    </style>
    </head>
<body>
<div id="root">
    <img id="splash-logo" src="logo.png" alt="splash screen logo"/>
</div>
<div id="popups"></div>
</body>
</html>

Here is my App.js

function App() {
    const classes = useStyles()

    return (
        <Router>
            <div className={classes.root}>
                <Switch>
                    <Route path="/portal/alt">
                        <AltPortalSwitch/>
                    </Route>
                    <Route path="/">
                        <MainPortalSwitch/>
                    </Route>
                </Switch>
            </div>
        </Router>
    );
}

Alt portal and main portal switches contain more routes within those components, but they only differ based on authentication, styling etc is the same for all routes.

The splash screen works on any route within the MainPortalSwitch, but the image appears as a broken link whenever I go to a page in the Alt portal switch. I really don't know why this would happen cause I thought what happens in index.html before the react app loads and is pushed into the root div would be unaffected by code within the react app itself.

Also, the splash screen is buggy for MainPortalSwitch. If I hard refresh with Ctrl+Shift+R, it will always work perfectly. If I normal refresh sometimes it works, sometimes ihe image doesn't even show. I thought this could have been because the animation makes it lag but even if I remove the animation it is still buggy on and off. Any insight would be appreciated!

reactjs splash-screen

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'React splash screen image broken on some routes

Sources

Related Questions