React Production Build 是 React 应用在生产环境下的构建版本。它通过优化代码、压缩文件、去除开发时的调试信息等手段,提升应用的性能和安全性。
在 React 应用中,使用 Production Build 部署后,页面刷新时可能会显示 404 错误。这是因为 React 应用通常使用前端路由(如 React Router),而服务器默认情况下并不知道如何处理这些前端路由。
HashRouter
HashRouter
使用 URL 的哈希部分(#)来处理路由,不需要服务器配置。
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
function App() {
return (
<Router>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Router>
);
}
如果你使用的是 BrowserRouter
,则需要配置服务器以支持前端路由。以下是一些常见服务器的配置示例:
server {
listen 80;
server_name yourdomain.com;
location / {
root /path/to/your/build;
try_files $uri /index.html;
}
}
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
historyApiFallback
如果你使用的是 Webpack Dev Server,可以启用 historyApiFallback
选项:
module.exports = {
// 其他配置...
devServer: {
historyApiFallback: true,
},
};
通过以上方法,你可以解决 React Production Build 在页面刷新时显示 404 的问题。选择适合你项目的方法进行配置即可。
领取专属 10元无门槛券
手把手带您无忧上云