React Router 刷新页面 404 问题解决方法及服务器配置

OUDKE

于 2023-09-21 06:07:24 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： react.js 服务器前端

本文链接：https://blog.csdn.net/OUDKE/article/details/133118400

服务器专栏收录该内容

201 篇文章 ¥59.90 ¥99.00

订阅专栏

在使用React Router开发单页应用时，刷新页面可能导致404错误。这是因为服务器不理解前端路由。本文介绍了如何通过配置服务器将所有请求重定向到前端应用，解决此问题。示例代码展示了在Express服务器上设置静态文件服务和捕获所有路由的处理方式，以及在`package.json`中指定应用基本URL以确保正确文件路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用 React Router 开发单页面应用时，经常会遇到刷新页面后出现 404 错误的问题。这是因为 React Router 默认使用的是 HTML5 History API，而服务器在收到刷新请求时，无法正确处理这些路由请求。本文将介绍如何解决这个问题，并提供相应的源代码示例。

问题描述

当我们在 React 应用中使用 React Router 实现路由导航时，通常使用 <BrowserRouter> 组件包裹我们的应用。这样可以让我们在浏览器中以友好的 URL 形式访问不同的页面。例如，我们可以通过 http://example.com/home 来访问主页，而不是像传统的多页面应用那样使用查询参数或哈希路由。

然而，当我们在使用 React Router 进行导航后刷新页面时，服务器将会尝试向该 URL 发送请求，并返回 404 错误页面。这是因为实际上服务器并不了解我们的前端路由规则，它只知道如何处理静态文件或特定的路由请求。

解决方法

要解决这个问题，我们需要配置服务器以将所有的路由请求都重定向到我们的前端应用。这样，无论用户访问任何路由，都会返回我们的应用，并由 React Router 在前端进行路由匹配和渲染。

假设我们使用的是 Express 服务器，下面是一个简单的示例代码：

了解本专栏