Menu
I used react-router-dom and I build my react-app. When I deploy it on the server, I get a blank page and the console is empty.
My App.js is :
import React, { Component } from 'react';
import { Route, Switch, BrowserRouter} from 'react-router-dom';
import Agenda from './components/Agenda/Agenda';
import Planning from './components/Planning/Planning';
class App extends Component {
render() {
return (
<div>
<BrowserRouter basename="/">
<Switch>
<Route exact path="/" component={Agenda} />
<Route path="/planning" component={Planning} />
</Switch>
</BrowserRouter>
</div>
);
}
}
export default App;
My index.js is :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App/>
, document.getElementById('root'));
My index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.ico">
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css"/>
<link rel="manifest" href="manifest.json">
<link rel="data" href="data.json">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<title>Test</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
</body>
</html>
In my package.json, I have :
"homepage": "."
And when I change my homepage to https://dev.test.com/Reactand
when I run it, I get a blank page, such as the address, which I deployed is : https://dev.test.com/React/ It is not public. When I run serve-s build, I get a blank screen on the console, I get:
My index.html on production is :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/>
<meta name="theme-color" content="#000000"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css"/>
<link rel="manifest" href="manifest.json">
<link rel="data" href="data.json">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<title>Test</title>
<link href="/React/static/css/2.2aa93811.chunk.css" rel="stylesheet">
<link href="/React/static/css/main.ca6e1d23.chunk.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script>!function(f){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],l=0,a=[];l<n.length;l++)t=n[l],c[t]&&a.push(c[t][0]),c[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(f[r]=o[r]);for(s&&s(e);a.length;)a.shift()();return p.push.apply(p,u||[]),i()}function i(){for(var e,r=0;r<p.length;r++){for(var t=p[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==c[u]&&(n=!1)}n&&(p.splice(r--,1),e=l(l.s=t[0]))}return e}var t={},c={1:0},p=[];function l(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return f[e].call(r.exports,r,r.exports,l),r.l=!0,r.exports}l.m=f,l.c=t,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(r,e){if(1&e&&(r=l(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)l.d(t,n,function(e){return r[e]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/ReactCalendar/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;i()}([])</script>
<script src="/React/static/js/2.4a7f0704.chunk.js"></script>
<script src="/React/static/js/main.f9268394.chunk.js"></script>
</body>
</html>
How can I fix it ?
958
A blank or white screen occurs when React encounters a rendering error in a component (for example, trying to render obj. param when obj is undefined). You would probably think that when React encounters an error, the faulty component and descendants will unmount.
To update your React version, install the latest versions of the react and react-dom packages by running npm install react@latest react-dom@latest . If you use create-react-app , also update the version of react-scripts . Copied! The command will update the versions of the react-related packages.
Open a terminal on vscode, then make sure you already node installed. Type npm install after that npm run start or whatever command to run, you can see on package. json . Show activity on this post.
Try changing basename="/" on your BrowserRouter to basename="/React". react-router needs this if used in a sub-directory.
From the react-router docs:
basename: The base URL for all locations. If your app is served from a sub-directory on your server, you'll want to set this to the sub-directory. A properly formatted basename should have a leading slash, but no trailing slash.
Also change homepage in package.json to the url of your production target. homepage="." means it will work on every domain where it is located in the server root (and is also the default behaviour).
From the React docs regarding deployment:
By default, Create React App produces a build assuming your app is hosted at the server root. To override this, specify the homepage in your package.json, for example:
"homepage": "http://mywebsite.com/relativepath",This will let Create React App correctly infer the root path to use in the generated HTML file.
144
I ran into the same problem and solved it!
If anyone has still this issue, follow the following steps.
1 - You need to update your browser. Refer to this, https://create-react-app.dev/docs/supported-browsers-features/#configuring-supported-browsers
2- You need to add "react-router-dom": dependency to your package.json file using npm i react-router-dom
3- Add "homepage": ".", to your package.json file
Hope this helps.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
