使用 Create React App 生成静态 HTML 登陆页面

Question

您好，我有一个静态 html 登陆页面，它有自己的 css、静态资源，并链接到其他几个静态页面。所以整个迷你项目都有自己的index.html、about-us.html、contact.html等。此外，我还通过CRA构建了一个React应用程序，其中我有一个非常酷的仪表板，现在我想将两者结合起来我的网站的入口点是登陆页面，然后当您转到 /dashboard 路径时，这是我的反应应用程序我怎样才能实现这一点？

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

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

我的 React 项目使用 React 路由器，因此我在路径 /dashboard 处有一个功能齐全的 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();

Answer 1

运行yarn build创建的反应应用程序后，将有一个名为的文件夹，build其中包含多个文件。您感兴趣的文件将是index.html该文件夹下的所有内容static。

index.html 文件可以复制到 Web 服务器中的任何位置。可以毫无问题地重命名它。该static文件夹需要位于网页的根目录 -index.html引用 中的所有文件/static。

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