Javascript 使用CreateReact应用程序的静态HTML登录页

嗨，我有一个静态html登录页，它有自己的css和静态资产，并链接到其他几个静态页面。因此，整个迷你项目都有自己的index.html、about-us.html、contact.html等。此外，我还通过CRA构建了一个react应用程序，其中有一个非常酷的仪表盘，现在我想将两者结合起来，其中我的网站的入口点是登录页，然后当您转到/dashboard路径，即我的react应用程序时，我如何实现这一点

因此，我的静态登录页项目的项目结构如下所示：

/homepage
--index.html
--contact.html
--about-us.html
--/static
----css files, imgs, ect

我的React项目使用React路由器，因此我在路径/仪表板上有一个功能齐全的React项目

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import { Route, BrowserRouter as Router, Switch } from "react-router-dom";
import Login from "./components/Login/Login";
import Dashboard from "./components/Dashboard";
import SignupPage from "./components/Signup/SignupPage";

const App = (
  <Router>
    <Switch>
      <Route exact path="/login" component={Login} />
      <Route exact path="/signup" component={SignupPage} />
      <PrivateRoute exact path="/dashboard" component={Dashboard} />
    </Switch>
  </Router>
);

ReactDOM.render(App, document.getElementById("root"));

serviceWorker.unregister();

从“React”导入React；
从“react dom”导入react dom；
导入“/index.css”；
将*作为serviceWorker从“/serviceWorker”导入；
从“react Router dom”导入{Route，BrowserRouter作为路由器，Switch}；
从“/components/Login/Login”导入登录名；
从“/components/Dashboard”导入仪表板；
从“/components/Signup/SignupPage”导入SignupPage；
常量应用=(
);
render（App，document.getElementById（“根”）；
serviceWorker.unregister（）；

运行

warn build

后，您的create react应用程序将有一个名为

build

的文件夹，其中包含多个文件。您感兴趣的文件将是

index.html

和

static

文件夹下的所有文件

index.html文件可以复制到web服务器中的任何位置。它可以被重命名而不会出现问题。

static

文件夹需要位于网页的根目录下-

index.html

引用了

/static

中的所有文件

---

名称和文件结构可以更改，但您必须弹出您的CRA项目并自己编辑脚本。

只需尝试在服务器上添加设置，以便/dashboard路由指向您的react应用程序。 例如，在NGINX中，您可以添加配置

location ^~ /dashboard {
alias <yourprojectfolder>/build;
try_files $uri $uri/ /dashboard /index.html;
}

location^~/仪表板{
别名/构建；
try_files$uri$uri//dashboard/index.html；
}

您可能需要将“basename”属性添加到react应用程序的路由设置中：

<Router basename="/dashboard ">

---

---

如果不起作用，在React中将每个html页面重写为视图。 我知道你没有很多javascript，也不会有太多问题

另外

---

您可以使用“styled component”（样式化组件）模块包装您的视图，以防您的页面因css泄漏到其他组件而在视觉上受损。

您应该在问题中添加您迄今为止尝试过的内容。但是如果要先显示静态登录页，你应该在React应用程序中使用并创建

/dashboard

路由我已经在使用React路由器来提供我所有的React功能，比如/dashboard，但我不确定我应该如何提供索引。HTMLLIF如果你要部署该应用程序，你使用一些后端服务器来显示静态文件，比如Oooo，那么没有办法组合吗您可以使用Apache提供静态HTML文件，并使用单独的Express服务器提供React应用程序。但是，您必须为每个端口使用不同的端口。我建议您在SPA中添加静态文件，以提供除单独路径以外的所有路径，例如应用程序的

/dashboard

，以及登录页的

/

。因此，我必须手动重写CRA脚本，以启用我正在寻求的功能？在部署中使用复制粘贴步骤并不羞耻，而且它很容易实现自动化。也就是说，你可能已经从CRA毕业，拥有自己的网页配置。