React 前端工程部署（Tomcat）后 404 的解决方法（使用 ReactRouter v6）

前端

2023-12-17 15:51:26

404 错误的原因

当您将 React 前端工程部署到 Tomcat 后，访问页面时可能会遇到 404 错误。这是因为 Tomcat 无法找到您正在请求的资源。这可能是由于以下原因造成的：

服务器配置不当： Tomcat 可能没有正确配置为处理 React 路由。
前端代码不兼容： React 前端代码可能与 Tomcat 不兼容，导致 404 错误。

解决方案

要解决此问题，可以采取以下步骤：

检查服务器配置： 确保 Tomcat 已正确配置为处理 React 路由。
使用 React Router v6： React Router v6 是 React 的官方路由库，它提供了更好的兼容性和灵活性。
更新前端代码： 确保您的 React 前端代码与 React Router v6 兼容。

使用 React Router v6 解决 404 错误的详细步骤

安装 React Router v6：

npm install react-router-dom@6

在您的 React 项目中导入 React Router v6：

import { BrowserRouter, Routes, Route } from "react-router-dom";

配置 React Router v6：

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
};

确保您的服务器已正确配置为处理 React 路由：

在 Tomcat 中，需要在 web.xml 文件中添加以下配置：

<servlet>
  <servlet-name>React Router Servlet</servlet-name>
  <servlet-class>org.springframework.web.servlet.view.RedirectView</servlet-class>
  <init-param>
    <param-name>url</param-name>
    <param-value>/index.html</param-value>
  </init-param>
</servlet>

<servlet-mapping>
  <servlet-name>React Router Servlet</servlet-name>
  <url-pattern>/*</url-pattern>
</servlet-mapping>