Page turns blanks in react type script application and after hard refresh turns normal

Hey i am creating a typescript react app and i am facing a problem that my app turns blank and after a hard refresh it goes normal and console show no errors in it . I tried research even posted in https://stackoverflow.com/questions/62797289/screen-goes-blank-of-react-typescript-application but no suitable answer cames. I had some doubts related my routes and my index.html file ```


import React, { FC } from 'react';
import { Route, Switch, withRouter } from 'react-router-dom';
import { withTranslation } from 'react-i18next';
import './App.css';
import Home from './components/Home';
import About from './components/About';
import Careers from './components/Careers';
import Contact from './components/Contact';
import Newsroom from './components/Newsroom';
import Awareness from './components/Awareness';
import Products from './components/Products';
import { Provider } from 'react-redux';
import store from './Store';
import Legal from './components/Legal';
import SponsoredProgram from './components/SponsoredProgram';

const App: FC<any> = (props) => {

  // props.i18n.changeLanguage("en");

  return (
    <Provider store={store} >
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/about' component={About} />
        <Route exact path='/careers' component={Careers} />
        <Route exact path='/contact' component={Contact} />
        <Route exact path='/newsroom' component={Newsroom} />
        <Route exact path='/awareness' component={Awareness} />
        <Route exact path='/products/:id' component={Products} />
        <Route exact path='/sponsored-program' component={SponsoredProgram} />
        <Route exact path='/help-center' component={Home} />
        <Route exact path='/safety-center' component={Home} />
        <Route exact path='/community-guidelines' component={Home} />
        <Route exact path='/privacy-policy' component={Home} />
        <Route exact path='/terms&conditions' component={Home} />
        <Route exact path='/copyrights' component={Home} />
        <Route exact path='/ccpa' component={Home} />
        <Route exact path='/gdpr' component={Home} />
        <Route exact path='/legal' component={Legal} />
      </Switch>
    </Provider>
  );
};

export default withTranslation()(withRouter(App) as React.ComponentType<any>);

And here is my index.tsx file

`import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { I18nextProvider } from "react-i18next";
import './index.css';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import'bootstrap/dist/css/bootstrap.min.css';
import'bootstrap/dist/js/bootstrap.bundle.min';
import App from './App';
import * as serviceWorker from './serviceWorker';
import i18n from './i18n';

ReactDOM.render(
  <I18nextProvider i18n={i18n}>
    <Router>
      <App />
    </Router>
  </I18nextProvider>
  ,
  document.getElementById('root')
);

serviceWorker.register();
`

And here is my index.html file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="stylesheet" href="%PUBLIC_URL%/css/custom.css">
    <link rel="stylesheet" href="%PUBLIC_URL%/css/responsive.css">

    <!-- <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script> -->
    <!-- <script src="js/custom.tsx"></script> -->

    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet">

    <!-- <script src="%PUBLIC_URL%/js/slider.js" ></script> -->

    <title>Company Website</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

  </body>
</html>

Can anyone help me out . Thanks

gitname / react-gh-pages

Page turns blanks in react type script application and after hard refresh turns normal #43