在像tomcat这样的应用服务器上，React中的路由没有按预期工作，但它在Node服务器上工作

Question

我在react中开发了一个简单的应用程序，有两个组件，即Category和Transport。我想使用react-dom路由加载这些组件，而当应用程序部署在节点服务器上时，我可以这样做。但当我将应用程序产品化并在tomcat中去部署时，它就不起作用了。在我的War中，我还添加了具有以下配置的web.xml。如果我遗漏了什么，有人能帮我吗？或者让我知道。

在Node服务器上，我可以使用以下URL访问组件http://localhost:3000/categoryhttp://localhost:3000/transport

我想在tomcat上以类似的方式访问该组件。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();

App.js

import './App.css';
import {BrowserRouter, Routes, Route } from "react-router-dom";
import Transport from "./Components/Transport";
import Category from "./Components/Category";

function App() {
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route index element={<Category/>}/>
<Route path="category" element={<Category/>}/>
<Route path="transport" element={<Transport/>}/>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;

Web.xml

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?><web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" metadata-complete="false" version="3.1" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee    http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
<display-name>React App </display-name>
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
</web-app>

Answer 1

您必须在生产模式下构建react应用程序，并将所有构建内容复制到tomcat webapps文件夹的ROOT目录中。然后将index.html重命名为index.jsp

在web.xml中添加以下servlet映射。这会将您的所有请求重定向到index.jsp

<servlet>
<servlet-name>index</servlet-name>
<jsp-file>/index.jsp</jsp-file>
</servlet>
<servlet-mapping>
<servlet-name>index</servlet-name>
<url-pattern>/*</url-pattern>
</servlet-mapping>

如果您只需要将特定的url重定向到react应用程序，请在<url-pattern>中配置它