Netlify 在页面刷新时呈现 404（使用 React 和 React-router）

服务器

如何使用 React 和 React-router 在页面刷新时呈现 404

在构建单页应用程序时，使用 React 和 React-router 可以提供丰富的用户体验和导航功能。然而，当用户刷新页面时，可能会遇到一个问题：浏览器默认会向服务器发出请求，但这可能导致页面无法找到，从而呈现 404 错误页面。本文将介绍如何处理这个问题，并展示一个案例代码。

问题的根源

在深入讨论解决方案之前，让我们先了解一下为什么会出现这个问题。在单页应用程序中，所有的路由都被处理在前端，而不是通过服务器请求新的页面。当用户在应用程序中导航时，React-router 会根据路由配置渲染相应的组件。然而，当用户刷新页面时，浏览器会向服务器发出请求，服务器会尝试查找与请求 URL 对应的页面，但由于这些路由只存在于前端，服务器将无法找到相应的页面，从而返回一个 404 错误。

解决方案

为了解决这个问题，我们需要在服务器端配置一个通用的路由，当发生 404 错误时，将请求重定向到我们的应用程序主页。这可以通过使用 Netlify 的 _redirects 文件来实现。下面是一个示例的 _redirects 文件内容：

/*    /index.html   200

这个配置的意思是，无论请求的是什么路径，都将被重定向到 index.html 页面，并且返回 200 状态码（成功）。这样，当用户刷新页面时，服务器将始终返回应用程序的主页，而不是 404 错误页面。

案例代码

下面是一个使用 React 和 React-router 的简单案例代码，演示了如何在页面刷新时呈现 404 错误页面：

JSx
// App.JS
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import NotFound from './NotFound';
const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
};
export default App;

JSx
// Home.JS
import React from 'react';
const Home = () => {
  return <h1>Welcome to the Home page!</h1>;
};
export default Home;

JSx
// NotFound.JS
import React from 'react';
const NotFound = () => {
  return <h1>404 - Page Not Found</h1>;
};
export default NotFound;

在这个案例中，我们定义了两个页面组件：Home 和 NotFound。在 App 组件中，我们使用 BrowserRouter 和 Switch 组件来处理路由，并将 Home 组件与根路径匹配，将 NotFound 组件作为默认路由。这样，当用户访问不存在的路径时，将呈现 NotFound 组件，并显示 "404 - Page Not Found"。

通过在服务器端配置通用路由，我们可以解决使用 React 和 React-router 构建的单页应用程序在页面刷新时呈现 404 错误页面的问题。这样，无论用户如何导航或刷新页面，我们始终能够提供一致的用户体验。希望本文对你有所帮助！