真正的网上赚钱平台_广东网站建设方案_google下载官网_百度指数排名明星

在使用 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 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 组件会被渲染，提供友好的提示。