上一篇:以下职位没有解决方案对我起作用: Blank page after running build on 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>
);

建筑物被放置在一个办公室.我使用类似的URL访问它:https://test.myweb.com/MyApp.

我在Package.json:"homepage": ".""homepage": "https://test.myweb.com/MyApp"上都try 了建议的配置,但都不适合我.同时,我一直在try 如下所示的.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的Property 'homepage'
  • .htaccess个文件..htaccess个文件.

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

开发人员控制台显示文件是某种类型的读取,但它在根级别停止,不会进一步:

 <body>
   <noscript>This app requires Javascript to function.</noscript>
   <div id="root"></div>
 </body

推荐答案

建筑物被放置在一个办公室.我用一个 类似的URL:"https://test.myweb.com/MyApp".

React—Router—DOM路由组件假设它呈现在"/"处,并将所有路由和链接视为相对于this路径.如果您从子目录托管应用程序,则需要通过basename prop将此信息告知路由.

basename

将应用程序配置为在中的特定基本名称下运行 该URL

如果您正在从服务器上的"/MyApp"子目录部署/托管应用程序,则将此作为路由的basename prop传递.

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

Javascript相关问答推荐

调用removeEvents不起作用

JQuery. show()工作,但. hide()不工作

在JavaScript中声明自定义内置元素不起作用

Exceljs:我们在file.xlsx(...)&#中发现了一个问题'"" 39人;

如何修复(或忽略)HTML模板中的TypeScript错误?'

为什么promise对js中的错误有一个奇怪的优先级?

为什么!逗号和空格不会作为输出返回,如果它在参数上?

在open shadow—root中匹配时,使用jQuery删除一个封闭的div类

如何将数据块添加到d3力有向图中?

映射类型定义,其中值对应于键

将异步回调转换为异步生成器模式

Phaserjs-创建带有层纹理的精灵层以自定义外观

未捕获的运行时错误:调度程序为空

如何访问此数组中的值?

React:防止useContext重新渲染整个应用程序或在组件之间共享数据而不重新渲染所有组件

如何在FiRestore中的事务中使用getCountFromServer

与在编剧中具有动态价值的定位器交互

如果我的列有条件,我如何呈现图标?

按特定顺序将4个数组组合在一起,按ID分组

material UI自动完成全宽