在刷新页面上找不到React js/空白页面

Question

我知道这是一个常见的问题，我在stackoverflow中尝试了一些答案，但在我的情况下，它还不起作用。

我在共享主机中有一个应用程序，它是我使用yarn build构建的。刷新页面时，会按预期显示404错误。所以我阅读了这些文档，并创建了一个.htaccess文件，代码如下：

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

我把它添加到项目的根文件夹中。现在一切正常。

我的管理面板的第二个版本位于子目录中：https://example.com/Admin/Login我在登录目录上提供管理应用程序。

因此，当我刷新页面时，我也面临同样的问题。例如https://example.com/Admin/Dashboard.

如果我刷新https://example.com/Admin/Login它加载页面，运行良好但令人耳目一新https://example.com/Admin/Dashboard我收到一张空白页。

我甚至使用位于public目录中的相同.htaccess文件构建了管理面板，该文件在构建过程后被复制到构建文件夹中，但它不起作用。我总是收到一张空白页。

我在这里读到了一些答案，但它还不起作用。

routes.js:

import React from 'react';
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Login from './pages/Login';
import Admin from './pages/Dashboard';
export default function Routes() {
return (
<BrowserRouter>
<Switch>
<Route path="/Admin/Login" exact component={Login} />
<Route path="/Admin/Dashboard" component={Manager} />
</Switch>
</BrowserRouter>
);
}

package.json:

{
"name": "dashboard",
"homepage": "https://example.com/Admin/Login",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-input-mask": "^2.0.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

还有什么我该做的吗？

Answer 1

我通过将登录文件夹内容移动到根目录来实现它(https://example.com/Admin)这样登录表单就被加载到上面了，我离开了.htaccess。