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

问题描述 投票:0回答:1

上一篇注释:以下帖子中的解决方案对我不起作用: 在 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 构建的,以防这种情况需要特殊配置。

reactjs .htaccess react-router
1个回答
0
投票

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

"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>
  );
}
© www.soinside.com 2019 - 2024. All rights reserved.