时间戳

首页 > 解决方案 > 使用 Create React App 的静态 HTML 登录页面

javascript - 使用 Create React App 的静态 HTML 登录页面

问题描述

嗨，我有一个静态 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();

标签： javascripthtmlreactjsfrontendcreate-react-app

解决方案

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

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

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

<Router basename="/dashboard ">

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

此外

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

推荐阅读