如何配置tomcat 7以在react中使用react-router-dom？

Posted 2023-02-22

【中文标题】如何配置tomcat 7以在react中使用react-router-dom？

【英文标题】：How to configure tomcat 7 to work with react-router-dom in react?

【发布时间】：2018-07-13 07:04:53

【问题描述】：

我有一个 react 项目，它在开发版本中运行良好，但是当我将其导出 (bundle.js) 并将其带到 tomcat 时，它无法识别 react-router-dom 的路由。

我需要在 tomcat 中配置一些东西吗？我找到了几个例子，但它们对我没有用：

react routing is able to handle different url path but tomcat returns 404 not available resources

https://github.com/gildata/RAIO/issues/138

这是我的 index.jsx：

import React from 'react';
import  render  from 'react-dom';
import  BrowserRouter  from 'react-router-dom';
import  IntlProvider  from 'react-intl';
import  Provider  from 'react-redux';
import store from 'src/app/store';
import App from 'src/app/App';

render(
  <Provider store=store>
    <IntlProvider locale="en">
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </IntlProvider>
  </Provider>,
  document.getElementById('contenedor'),
);

这是 App.jsx

import React from 'react';
import  Switch, Route, Redirect  from 'react-router-dom';
import Login from 'src/app/Login';
import Menu from 'src/app/Menu';

const logueado = localStorage.getItem('tLogueado');

const App = () => (
  <main>
    <Switch>
      <Route exact path="/login" render=() => (logueado ? (<Redirect to="/onix" />) : (<Login />)) />
      <Route exact path="/onix" render=() => (logueado ? (<Menu />) : (<Redirect to="/login" />)) />
    </Switch>
  </main>
);

export default App;

我做错了什么？请耐心等待我是新手。

【问题讨论】：

实际错误究竟是什么？您尝试导航到哪个网址，您看到了什么？你有404吗？你在localhost 上本地运行tomcat 吗？ Tomcat 不知道您的前端应用程序中定义的任何路由。您必须将其配置为响应您的应用程序对 baseUrl 下的每个请求。从那里您的应用程序将处理路由。从 tomcat 的角度来看，只有一个页面存在，即您的 react 应用程序。

如果我在本地运行 tomcat 试图导航到路由：localhost:8080/login 但它标记了我错误：HTTP 状态 404 - / login 如何配置它以响应 baseUrl 下方？

无论您请求/login 或/onix 还是任何其他请求，它都应配置为始终响应您的应用程序，因为您的应用程序处理/ 本身以下的路由。此外，如果没有路由与定义的其他路由匹配，您通常应该提供默认路由。但我不知道如何在tomcat中做到这一点。你想使用tomcat有什么特别的原因吗？为了让它现在工作，在你的反应路由器中添加一个默认路由，重定向到/login，然后用localhost:8080/打开它可能就足够了。

我已经这样做了，但是这个错误标志着我：Error de mapa de fuente: request failed with status 404 URL del recurso: localhost:8080/siag-fe/dist/bundle.js URL del mapa de fuente: validateNextState.js.map跨度>

使用Tomcat RewriteValve，见here

【参考方案1】：

有两种可能的方法来解决这个问题

使用 HashRouter 代替 BrowserRouter

或

使用基本名称，例如：<BrowserRouter basename="/calendar"/>

查看此链接how-to-deploy-a-react-app-to-a-subdirectory