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状态码。
