在使用 React Router 时,可以通过设置一个特殊的路由来处理 404 错误页面。通常,404 页面用于显示用户访问的路径不存在时的提示信息。以下是实现步骤:
1. 创建 404 组件
首先,创建一个简单的 404 组件。例如,命名为 NotFound.js
:
// NotFound.js
import React from 'react';
const NotFound = () => {
return (
<div>
<h1>404 - 页面未找到</h1>
<p>抱歉,您访问的页面不存在。</p>
</div>
);
};
export default NotFound;
2. 在路由中添加 404 路由
在你的主应用组件中,使用 Switch
组件来设置路由。将 NotFound
组件作为最后一个 Route
,这样它会在没有其他路由匹配时渲染。
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home fro