上一篇注释:以下帖子中的解决方案对我不起作用: 在 create-react-app 上运行构建后出现空白页面
就我而言,App.js 主要功能:
function App() {
return (
<div className='App'>
<Routes>
<Route index path='/' element={<Login />} />
<Route
path='/home'
element={<ProtectedRoute children={Home} />}
/>
</Routes>
</div>
)
}
和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>
);
构建被放置在子目录中。我使用与此类似的网址访问它:https://test.myweb.com/MyApp。
我已经尝试了 package.json 上的建议配置:
"homepage": "."
和"homepage": "https://test.myweb.com/MyApp"
,但没有一个对我有用。同时,我一直在尝试制作一个工作的.htaccess,如下所示,但没有成功:
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>
此时,我有不同的设置来检查,但我不确定如何设置或设置什么:
BrowserRouter
正确使用。'homepage'
.htaccess
文件。值得一提的是,登录是使用 Auth0 构建的,以防这种情况需要特殊配置。
构建被放置在子目录中。我使用访问它 与此类似的网址:
."https://test.myweb.com/MyApp"
React-Router-DOM 路由器组件假设它在
"/"
处渲染,并将所有路由和链接视为相对于 this 路径。如果您从子目录托管应用程序,那么您需要通过 basename
属性告诉路由器此信息。
basename
将您的应用程序配置为在特定基本名称下运行 网址
如果您从服务器上的
"/MyApp"
子目录部署/托管应用程序,请将其作为路由器的 basename
属性传递。
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 basename="/MyApp">
<App />
</BrowserRouter>
</Auth0Provider>
</div>
</div>
);
function App() {
return (
<div className='App'>
<Routes>
<Route
path='/' // <-- renders as "/MyApp/"
element={<Login />}
/>
<Route
path='/home' // <-- renders at "/MyApp/home"
element={<ProtectedRoute children={Home} />}
/>
</Routes>
</div>
);
}