Comments (2)
iamAbdulAhad3481
commented on July 28, 2024
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
from react-gh-pages.
T-Damer
commented on July 28, 2024
Try updating your routes to /{yourProjName}/about for example, I have the same issue, this might help, might not
from react-gh-pages.
Related Issues (20)
- Create example issue using new "Help" template
- Deploy script does not automatically build
- Tutorial does not indicate that Vite would store the build in `dist` instead of `build` HOT 2
- Blank website after deploying with gitpages HOT 2
- Blank Page after deployment HOT 16
- Github Pages Failed to load resource: The server responded with a status of 404 () HOT 2
- Deleting history of past commits with GitHub pages HOT 4
- Translate instructions into traditional Chinese (offer) HOT 4
- Failed to create `gh-pages` branch HOT 3
- App deploys successfully but rendering empty page (Unexpected Token) HOT 2
- Routing works locally, but not on GitHub Pages HOT 2
- Best way to push ongoing changes HOT 3
- Storing API keys in client side web apps, even at build time, exposes those API keys to users HOT 1
- Translate instructions into Spanish HOT 2
- React BrowserRouter doesn not work in github page
- Indonesian Translation
- I am getting a blank page HOT 2
- Blank page on deployment HOT 1
- Github Page failed to deploy
- Brazilian Portuguese Translation
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-gh-pages.