解决 React SPA 单页面应用中路由刷新 404 的问题-JavaScript中文网-JavaScript教程资源分享门户

在 React 单页面应用（SPA）中，通常使用 React Router 来处理页面的路由。在前端应用中，用户可能通过点击链接或手动输入 URL 的方式来访问不同的页面。

然而，当用户通过手动输入 URL 或者刷新当前页面时，有时会出现 404 错误，即页面不存在。这是因为在单页应用中，网络请求通过 JavaScript 发起，而不是通过浏览器默认的 HTTP 请求方式。当用户手动输入 URL 或刷新时，浏览器会默认发出 HTTP 请求，而此时服务器没有对应的页面资源返回，就会出现 404 错误。

在本文中，将介绍如何解决 React SPA 中的路由刷新 404 错误问题。

解决方案

服务器端配置

为了解决路由刷新 404 错误问题，我们需要让服务器在请求时，始终返回前端应用的主页面，即 index.html。

对于使用的服务器，我们需要进行相应的配置，来确保服务器处理所有的请求都返回 index.html。

以 Nginx 服务器为例，可以在 Nginx 的配置文件中添加如下配置：

location / {
    try_files $uri /index.html;
}

这条配置会尝试寻找请求的资源，如果请求的资源不存在，则返回 index.html。

处理路由

经过上述配置后，我们来讨论如何在 React SPA 中处理路由。

首先，我们需要确保在 React Router 中使用 BrowserRouter 而非 HashRouter。

BrowserRouter 使用 HTML5 History API，可以将当前的路由记录到浏览器的浏览记录中。而 HashRouter 使用 URL 中的哈希值来模拟路由，但如果用户手动输入 URL，它会认为是一个新的 URL 和路由，而不是刷新当前页面。

接下来，我们需要在 React SPA 的主页面中，处理所有在路由文件中定义的路由。对于使用 react-router-dom 的 React 应用，可以在 App.js 中添加以下代码：

// javascriptcn.com 代码示例
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

在上述代码中，我们使用了 Switch 组件来封装我们定义的路由。Switch 组件只会渲染其中的一个路由组件，而不会将所有的路由组件都渲染。

其中，<Route> 组件可以定义一个匹配的路由，exact 属性用来匹配精确的路径，避免路由被错误匹配。

最后,对于不存在的路由，我们需要定义一个 NotFound 组件，并将其作为最后一个路由。在 NotFound 组件中，我们可以渲染一个 404 页面，或者跳转到首页等操作。

总结

通过上述方案，我们可以解决 React SPA 单页面应用中路由刷新 404 的问题。关键在于配置服务器，使用 BrowserRouter，以及在主页面中处理所有在路由文件中定义的路由。

在实际开发中，我们需要加深对 URL 和路由的理解，并根据具体情况进行相应的配置。

示例代码如下：

// javascriptcn.com 代码示例
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652e02d47d4982a6ebf181e6