Previous note: No solution on the following post is working for me: Blank page after running build on create-react-app
For my case, App.js main function:
function App() {
return (
<div className='App'>
<Routes>
<Route index path='/' element={<Login />} />
<Route
path='/home'
element={<ProtectedRoute children={Home} />}
/>
</Routes>
</div>
)
}
and index.js:
root.render(
<div className="flex justify-center bg-black overscroll-contain">
<div className="w-full max-w-[70rem]">
<Auth0Provider
domain={domain}
clientId={clientId}
authorizationParams={{
redirect_uri: window.location.origin,
}}>
<BrowserRouter>
<App />
</BrowserRouter>
</Auth0Provider>
</div>
</div>
);
The build is being placed in a subdirectory. I access it using a similar url to this one: https://test.myweb.com/MyApp.
I have tried both the suggested configuration on package.json: "homepage": "." and "homepage": "https://test.myweb.com/MyApp" and none works for me. At the same time, I have been trying to make a working .htaccess as follows, with no luck:
RewriteEngine on
#for app in subdirectory
RewriteBase /test/testingProjects/MyApp
Header set Cache-Control "no-cache"
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^.*/test/testingProjects/MyApp.* /test/testingProjects/MyApp/index.html [L]
#for root app
RewriteBase /
Header set Cache-Control "no-cache"
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
# DISABLE CACHING
<IfModule mod_headers.c>
Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires 0
</IfModule>
<FilesMatch "\.(html|js)$">
<IfModule mod_expires.c>
ExpiresActive Off
</IfModule>
<IfModule mod_headers.c>
FileETag None
Header unset ETag
Header unset Pragma
Header unset Cache-Control
Header unset Last-Modified
Header set Pragma "no-cache"
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Expires "Thu, 1 Jan 1970 00:00:00 GMT"
</IfModule>
</FilesMatch>
At this point I have different settings to check that I'm not sure how or what to set:
BrowserRouterproper usage.- Property
'homepage'on package.json .htaccessfile.
Worth mentioning that the login is built with Auth0 in case a special configuration is needed for this case.
The developer console show that the files are kind of reading, but it stops at root level not going further:
<body>
<noscript>This app requires Javascript to function.</noscript>
<div id="root"></div>
</body
The React-Router-DOM router component assumes it is rendered at
"/"and treats all routes and links as relative to this path. If you are hosting your app from a sub-directory then you'll need to tell the router this information via thebasenameprop.If you are deploying/hosting your app from a
"/MyApp"sub-directory on your server, then pass this as the router'sbasenameprop.