react如何定义404页面

定义404页面的方法

在React中定义404页面通常涉及路由配置，以下是几种常见的方法：

使用React Router v6

在React Router v6中，可以通过<Route>的path="*"属性捕获未匹配的路由，并渲染404组件：

import { Routes, Route } from 'react-router-dom';
import NotFound from './NotFound';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

使用React Router v5

在v5版本中，可以通过<Switch>和<Redirect>实现：

import { Switch, Route, Redirect } from 'react-router-dom';
import NotFound from './NotFound';

function App() {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route component={NotFound} />
      <Redirect to="/404" />
    </Switch>
  );
}

自定义404组件示例

创建一个独立的NotFound组件，用于展示404内容：

const NotFound = () => {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>The requested URL does not exist.</p>
    </div>
  );
};

服务端渲染（SSR）场景

在Next.js等框架中，可以通过自定义pages/404.js文件自动处理：

export default function Custom404() {
  return <h1>404 - Page Not Found</h1>;
}

注意事项

• 确保404路由是最后一个匹配项（v6的path="*"或v5的无path属性）。
• 在开发模式下，React Router可能不会默认显示404页面，需通过导航测试验证。
• 生产环境中建议结合服务端配置（如Nginx/Apache）返回正确的HTTP状态码。