注意

Question

当我尝试将我的react应用部署为对tomcat的战争时，我遇到了许多问题，在调查之后，我做了以下事情：

1）npm运行构建

2）从构建目录获取结果，并将其放在My DynamicWebProject的WebContent文件夹下

3）从eclipse将该项目部署在tomcat上

但这对我不起作用，请点击以下链接：

http://frugalisminds.com/react-js/deploy-react-js-in-tomcat/#comment-26210

https://www.megadix.it/blog/create-react-app-servlet/

我完全按照建议进行了操作，但仍然无济于事。因此，我决定从头开始创建一个新应用并进行尝试，并与新应用一起按预期运行。

现在，我正在尝试了解我的应用程序有什么问题！我已经创建了这个沙箱（未完全连接-仅用于显示我的组件和站点结构）： https://codesandbox.io/s/upbeat-fermi-0hblu

（我有一个较旧的沙箱，该沙箱已完全连接并显示了一个演示，但未使用最新更改进行更新：https://codesandbox.io/s/fragrant-morning-267l5 万一您想看看应用程序的外观如何

如果我使用 AppTest 组件生成构建并通过tomcat部署它，则从第一个沙箱

进行构建（npm运行构建），它可以按预期工作，但是如果我对 App进行相同操作组件，它显示的是一个空页面，没有任何错误，也没有任何反应（如果我使用它：serve -s build，它可以正常工作）！问题只在于tomcat。

我的App组件怎么了？

注意

如果我在路由器中添加到组件的链接，然后单击这些链接，则组件已加载...但是它们没有自动加载（假设“ /”应加载其组件）：

 import React, { Component } from 'react';
import './App.css';

import Main from "./components/Main";
import Login from "./components/Login";
import ProjectCustomize from "./components/ProjectCustomize";
import {BrowserRouter, Link, Route, Switch} from "react-router-dom";


class App extends Component {

    render() {

        return (
            <div className="App">

                <BrowserRouter basename={process.env.REACT_APP_ROUTER_BASE || ''}>
                    <div>
                            <ul className="nav">
                                <li><Link to="/">Homepage</Link></li>
                                <li><Link to="/login">Login</Link></li>
                                <li><Link to="/customize">Customize</Link></li>
                            </ul>
                    <Switch>
                        <Route path="/" exact component={Main} />
                        <Route path="/login" component={Login} />
                        <Route path="/customize" component={ProjectCustomize} />
                        {/*<Redirect path="*" to="/" />*/}
                    </Switch>
                        </div>
                </BrowserRouter>

            </div>
        );
    }

}


export default App;

更新

如果我使用HashRouter而不是BrowserRouter，则站点开始响应，但是当重定向到其他页面时，我得到404！

但是，HashRouter仍然很丑陋，因为它在网址中添加了＃。

解决方法

作为尝试至少看一眼的解决方法，例如，如果将index.js替换为例如，则会显示该页面，但不能确定是否可以路由到其他页面。如果我在index.js内和App组件内使用，则同时具有路由器和组件，则渲染将两个组件显示为一个。因此，在这种情况下，为了从已部署的战争中看到某些东西，不仅需要提供路由器的内容，而且还需要提供一些内容，

将响应站点作为Tomcat部署到Tomcat上时出现空白屏幕

注意

更新

解决方法

0 个答案: