react框架如何设置404
在React中设置404页面
在React应用中，404页面通常用于处理未定义的路由。可以通过React Router来实现这一功能。
安装React Router：
npm install react-router-dom使用React Router v6设置404
在React Router v6中，可以通过<Routes>和<Route>组件配合path="*"来捕获所有未匹配的路由：
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
<Route path="*" element={<NotFoundPage />} />
</Routes>
</Router>
);
}
function NotFoundPage() {
return <h1>404 - Page Not Found</h1>;
}使用React Router v5设置404
在React Router v5中，可以通过<Switch>组件和将404路由放在最后来实现：
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/about" component={AboutPage} />
<Route component={NotFoundPage} />
</Switch>
</Router>
);
}
function NotFoundPage() {
return <h1>404 - Page Not Found</h1>;
}自定义404页面组件
可以创建一个专门的404页面组件，包含更丰富的UI和导航选项：
function NotFoundPage() {
return (
<div className="not-found">
<h1>404</h1>
<p>Oops! The page you're looking for doesn't exist.</p>
<Link to="/">Go back to home</Link>
</div>
);
}服务器端配置
对于生产环境，还需要确保服务器将所有路由请求重定向到index.html：
Express服务器示例：
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});Nginx配置示例：
location / {
try_files $uri /index.html;
}这些方法结合使用，可以在React应用中实现完整的404页面功能，既能在客户端捕获未匹配的路由，也能确保直接访问不存在的URL时正确返回404页面。
