React Router 404 页面处理：让你的应用更健壮

在使用 React Router 构建单页应用（SPA）时，处理 404 错误 是开发者经常遇到的问题。404 错误表示服务器无法找到请求的资源，这在用户访问不存在的页面时尤为常见。本文将详细介绍如何在 React Router 中优雅地处理 404 错误，并提供一些实用的应用场景。

React Router 404 错误的基本处理

在 React Router 中，处理 404 错误 的最基本方法是使用 <Switch> 组件和 <Route> 组件的 exact 属性。以下是一个简单的示例：

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route component={NotFound} /> // 404 页面
      </Switch>
    </Router>
  );
}

在这个例子中，<Route component={NotFound} /> 作为最后一个路由匹配项，当所有其他路由都不匹配时，它将渲染 NotFound 组件，显示 404 错误 页面。

动态路由和404处理

在实际应用中，路由可能包含动态参数，这时需要更复杂的逻辑来处理 404 错误。例如：

<Route path="/user/:id" render={({ match }) => {
  const user = getUserById(match.params.id);
  return user ? <UserProfile user={user} /> : <NotFound />;
}} />

这里，我们通过 render 属性来动态判断用户是否存在，如果不存在则显示 404 页面。

服务器端渲染（SSR）中的404处理

对于使用服务器端渲染的应用，处理 404 错误 需要在服务器端进行。可以使用 Express 或其他服务器框架来捕获未匹配的路由：

app.get('*', (req, res) => {
  const context = {};
  const markup = renderToString(
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  );

  if (context.url) {
    res.redirect(301, context.url);
  } else {
    res.status(200).send(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>404 - Not Found</title>
        </head>
        <body>
          <div id="root">${markup}</div>
          <script src="/bundle.js"></script>
        </body>
      </html>
    `);
  }
});

在这个例子中，如果服务器端渲染的过程中没有匹配到任何路由，服务器将返回一个包含 404 错误 页面的 HTML。

应用场景

用户友好的错误页面：设计一个友好的 404 页面，可以提供返回主页的链接或搜索功能，帮助用户找到他们想要的内容。
SEO优化：对于搜索引擎优化，确保 404 页面 不会影响网站的整体 SEO 评分。可以使用 301 重定向将旧链接重定向到新链接。
日志记录：在 404 错误 发生时，记录错误日志，以便开发者分析用户行为，优化应用结构。
动态内容管理：在内容管理系统中，动态生成的页面可能不存在，404 错误 处理可以帮助用户找到正确的页面或相关内容。

通过以上方法，开发者可以确保在 React Router 中优雅地处理 404 错误，提升用户体验，同时也符合中国的法律法规，避免因错误处理不当而导致的用户流失或法律问题。希望本文对你处理 React Router 404 错误有所帮助。