如何使用React Router处理404错误页面?

在使用 React Router 时,可以通过设置一个特殊的路由来处理 404 错误页面。通常,404 页面用于显示用户访问的路径不存在时的提示信息。以下是实现步骤:

1. 创建 404 组件

首先,创建一个简单的 404 组件。例如,命名为 NotFound.js

jsx 复制代码
// NotFound.js
import React from 'react';

const NotFound = () => {
  return (
    <div>
      <h1>404 - 页面未找到</h1>
      <p>抱歉,您访问的页面不存在。</p>
    </div>
  );
};

export default NotFound;

2. 在路由中添加 404 路由

在你的主应用组件中,使用 Switch 组件来设置路由。将 NotFound 组件作为最后一个 Route,这样它会在没有其他路由匹配时渲染。

jsx 复制代码
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        {/* 404 路由 */}
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
};

export default App;

3. 注意路由顺序

确保 NotFound 路由放在其他路由之后,因为 Switch 会按照顺序匹配路由。第一个匹配的路由会被渲染,因此 NotFound 需要放在最后。

4. 测试 404 页面

现在,你可以尝试访问一个不存在的路径,例如 /not-existing-path,你应该会看到 404 页面。

总结

通过以上步骤,你可以轻松地处理 React Router 中的 404 错误页面。当用户访问的路径没有相应的组件时,NotFound 组件会被渲染,提供友好的提示。

相关推荐
帧栈1 小时前
开发避坑指南(27):Vue3中高效安全修改列表元素属性的方法
前端·vue.js
max5006001 小时前
基于桥梁三维模型的无人机检测路径规划系统设计与实现
前端·javascript·python·算法·无人机·easyui
excel2 小时前
使用函数式封装绘制科赫雪花(Koch Snowflake)
前端
我命由我123452 小时前
软件开发 - 避免过多的 if-else 语句(使用策略模式、使用映射表、使用枚举、使用函数式编程)
java·开发语言·javascript·设计模式·java-ee·策略模式·js
萌萌哒草头将军2 小时前
Node.js v24.6.0 新功能速览 🚀🚀🚀
前端·javascript·node.js
AALoveTouch4 小时前
大麦APP抢票揭秘
javascript
持久的棒棒君4 小时前
启动electron桌面项目控制台输出中文时乱码解决
前端·javascript·electron
小离a_a5 小时前
使用原生css实现word目录样式,标题后面的...动态长度并始终在标题后方(生成点线)
前端·css
郭优秀的笔记5 小时前
抽奖程序web程序
前端·css·css3
布兰妮甜6 小时前
CSS Houdini 与 React 19 调度器:打造极致流畅的网页体验
前端·css·react.js·houdini