在React中设置404页面的方法

使用React Router实现404页面

在React应用中，通常通过React Router处理路由和404页面。以下是具体实现方式：

1. 安装React Router 确保项目中已安装react-router-dom：

   npm install react-router-dom

2. 创建404组件 新建一个NotFound组件文件：

   
   import React from 'react';

function NotFound() { return (

); }

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 />} />

服务器端配置

对于生产环境，还需要配置服务器以处理客户端路由：

1. Node.js Express服务器示例：

   app.get('*', (req, res) => {
   res.sendFile(path.join(__dirname, 'build', 'index.html'));
   });

2. Nginx配置示例：

   location / {
   try_files $uri $uri/ /index.html;
   }

这些配置确保当用户直接访问不存在的路由时，服务器会返回index.html，然后由React Router处理404页面显示。