react框架如何设置404
在React中设置404页面的方法
使用React Router实现404页面
在React应用中，通常通过React Router处理路由和404页面。以下是具体实现方式：
-
安装React Router 确保项目中已安装
react-router-dom：npm install react-router-dom -
创建404组件 新建一个NotFound组件文件：
import React from 'react';
function NotFound() { return (
404 - Page Not Found
The page you are looking for does not exist.
export default NotFound;
3. 配置路由
在主路由文件中设置404路由：
```jsx
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route component={NotFound} />
</Switch>
</Router>
);
}注意事项
- 确保404路由是Switch组件中的最后一个路由
- 在v6及以上版本的React Router中，需要使用Routes替代Switch，并用通配符*匹配404
<Route path="*" element={<NotFound />} />
服务器端配置
对于生产环境，还需要配置服务器以处理客户端路由：
-
Node.js Express服务器示例：
app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'build', 'index.html')); }); -
Nginx配置示例：
location / { try_files $uri $uri/ /index.html; }
这些配置确保当用户直接访问不存在的路由时，服务器会返回index.html，然后由React Router处理404页面显示。
