In my React JS web app when I make some changes and deploy on the production server the out of these all changes some changes are not reflected.
This means suppose there was first build in prod and I open in my browser and after this, I made some changes in code and again deploy on prod then later changes do not reflect only old changes are showing.
Also, CSS changes are reflected properly but somewhere images will be broken and some pages show a blank pages.
But while development all changes are reflecting properly but issue only in production.
And If I clear my cache, cooking and all of browser then only working fine.
So how can I clear it through programmatically while my web app is loading the first time only in React JS ?
I had tried with these headers but not working means not clearing cache and all
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
App.js
import React, { Component, lazy, Suspense } from 'react';
import './App.css';
import { Redirect, Route, Switch, withRouter } from 'react-router-dom';
import "react-whatsapp-widget/dist/index.css";
import LoadingGif from './assets/Images/loading-icon.gif';
import * as actions from './store/actions/index';
import { connect } from 'react-redux';
import TagManager from 'react-gtm-module';
const Home = lazy(() => import('./containers/Home/Home'));
function App(props) {
useEffect(()=>{
console.log(props.location)
props.onTryAutoSignup();
console.log("---------------------------")
console.log(props.phoneNumber)
},[props.phoneNumber])
return (
<div className="app">
<Suspense fallback={<div style={{ textAlign: "center" }}><img src={LoadingGif} alt="Loading...." /></div>}>
<Switch>
<Route exact strict path="/:url*" render={props => <Redirect to={`${props.location.pathname}/`}/>} />
<Route path="/" exact component={Home} />
<Route> {<Redirect to="/page_not_found" /> } </Route>
</Switch>
</Suspense>
</div>
)
}
const mapStateToProps = state => {
return {
isAuthenticated: state.verifyOtp.token !== null,
phoneNumber:state.verifyOtp.user
};
};
const mapDispatchToProps = dispatch => {
return {
onTryAutoSignup: () => dispatch(actions.authCheckState())
};
};
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Binks - Best Online Tailoring Service for Women</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</html>
