app is working fine in node server but i am getting blank page in Apache server even though i used absolute path.
Here is the index.html code
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="+Icons">
<title>React App</title>
<link href="./static/css/main.0778317d.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="./static/js/main.1b4d826e.js"></script>
</body>
Here are the screen shots..
app is working fine in node server but i am getting blank page in Apache server even though i used absolute path.
Here is the index.html code
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="https://fonts.googleapis./icon?family=Material+Icons">
<title>React App</title>
<link href="./static/css/main.0778317d.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="./static/js/main.1b4d826e.js"></script>
</body>
Here are the screen shots..
Share Improve this question edited Apr 17, 2020 at 7:25 Anurag Srivastava 14.5k4 gold badges37 silver badges46 bronze badges asked Sep 17, 2018 at 13:35 Abdul MoizAbdul Moiz 3173 silver badges8 bronze badges3 Answers
Reset to default 4I am using the react router 4. so when i used Router it create problems and not working with absolute paths. instead of Router using BrowserRouter and used basename for folder shop where i copied the build of my project.
import { BrowserRouter, Route, Switch } from 'react-router-dom';
<BrowserRouter history={history} basename="/shop/">
<div>
<Switch>
<Route exact path="/" ponent={App} />
<Route path="/cart" ponent={Cart} />
<PublicRoute path="/login" ponent={LoginPage} />
<PrivateRoute path="/dashboard" ponent={DashBoardPage} />
<PrivateRoute path="/checkout" ponent={checkOut} />
<PrivateRoute path="/favourite" ponent={favourite} />
<PrivateRoute
path="/payment_Information"
ponent={PaymentInformation}
/>
<Route path="/product_details/:pid" ponent={ProductDeatils} />
<Route path="*" pononent="NotFound" />
</Switch>
</div>
</BrowserRouter>
and in package.json file "homepage": "/shop" to create paths.
I was not able to get my app using React Router v4 to work on Apache hosting, even after trying the steps mentioned by @Abdul Moiz.
I found this answer : https://stackoverflow./a/50657757/7867822
Basically changing <BrowserRouter/> to <HashRouter/> worked for me.
If the website is hosted on http://namweb./NamFdr
Add the Folder name "NamFdr" in the below config :
|+> Add in package.json
"homepage": "/NamFdr",
|+> Add Router basename config in index.js
ReactDOM.render(
<BrowserRouter basename='/blocal'>
<App />
</BrowserRouter>,
document.getElementById('root')
)
[Or] Add Router basename config in app.js
import { BrowserRouter, Route, Switch } from 'react-router-dom';
-------------------------
<BrowserRouter basename="/NamFdr/">
<Switch>
<Route exact path="/" ponent={App} />
</Switch>
</BrowserRouter>