使用反应路由器 V6 和刷新页面时我得到空白页面

Posted 2023-02-22

【中文标题】使用反应路由器 V6 和刷新页面时我得到空白页面

【英文标题】：Using react router V6 and when refresh page I get blank page

【发布时间】：2021-04-05 08:35:50

【问题描述】：

我学习了 ReactJs，现在我无法理解这个问题。我发现much 对此进行了讨论，但这都是针对低于 v6 的路由器。

在本地主机上它工作正常，但在实时服务器生产上它不工作如果我输入这个或刷新：

https://greta.portplays.com/app/login

我得到一个空白页。

请告知我知道这与历史有关，但路由器 v6 不使用它与其他解释相同

这是我的路线，没什么特别的：

import React from 'react';
import ContentLayout from './components/structure/ContentLayout';
import DashboardLayout from './components/DashboardLayout';
import AccountView from './components/DashboardLayout/views/account/AccountView';
import SearchListView from './components/DashboardLayout/views/search/SearchListView';
import DashboardView from './components/DashboardLayout/views/dashboard/DashboardView';
import NotFoundView from './components/DashboardLayout/views/errors/NotFoundView';
import CreateContentView from './components/DashboardLayout/views/creator/CreateContentView';
import SettingsView from './components/DashboardLayout/views/settings/SettingsView';
import LoginView from './components/DashboardLayout/views/auth/LoginView';
import RegisterView from './components/DashboardLayout/views/auth/RegisterView';
import SubmissionsView from './components/DashboardLayout/views/submissions/SubmissionsView';
import InboxView from './components/DashboardLayout/views/inbox/InboxView';

const routes = [
    
        path: 'app',
        element: <DashboardLayout />,
        children: [
             path: 'account', element: <AccountView /> ,
             path: 'search', element: <SearchListView /> ,
             path: 'dashboard', element: <DashboardView /> ,
             path: 'create', element: <CreateContentView /> ,
             path: 'submissions', element: <SubmissionsView /> ,
             path: 'inbox', element: <InboxView /> ,
             path: 'settings', element: <SettingsView /> ,
             path: 'login', element: <LoginView /> ,
             path: 'register', element: <RegisterView /> ,
             path: '*', element: <NotFoundView /> ,
             path: '/', element: <DashboardView /> ,
        ],
    ,
    
        path: '/',
        element: <ContentLayout />,
        children: [
             path: '404', element: <NotFoundView /> ,
             path: '*', element: <NotFoundView /> ,
        ],
    ,
];

export default routes;

在我这样添加的 package.json 中

"homepage": "https://greta.portplays.com/",

还在我添加的应用的 Apache 服务器根目录中添加 .htaccess

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %REQUEST_FILENAME !-f
RewriteCond %REQUEST_FILENAME !-d
RewriteCond %REQUEST_FILENAME !-l
RewriteRule . /index.html [L]
</IfModule>

我的应用位于这样的子域中：

【问题讨论】：

在本地存储被清除或isUserAnon 设置为 false 时似乎工作正常

如果我在新的 Chrome 帐户浏览器中打开此“greta.portplays.com/app/login”，它将正常打开，但是当我按刷新 (F5) 时，我得到一个白页，没有错误或警告什么也没有。你从哪里得到 isUserAnon？？

这里是project，如果有人想深入了解:)

开发工具 (F12) > 应用程序 > 本地存储

你已经部署了构建文件夹？

【参考方案1】：

您需要在构建之前更改 package.json 文件。

  

  "devDependencies": ,
  "homepage": "<Your domain>",
  "author": "",
 

再次运行构建命令。

npm run build

【讨论】：

谢谢我已经设置了主页标签但没有作者

【参考方案2】：

当本地存储被清除或isUserAnon 设置为 false 时似乎工作正常。