创建 React App Build 后的空白页面放置在服务器上

Question

上一篇注释：以下帖子中的解决方案对我不起作用： 在 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

  正确使用。
package.json 上的
• 属性

  'homepage'

• .htaccess

  文件。

值得一提的是，登录是使用 Auth0 构建的，以防这种情况需要特殊配置。

Answer 1

构建被放置在子目录中。我使用访问它 与此类似的网址：

"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>
  );
}