Reactjs React生产构建显示404页刷新
我有一个ReactJS应用程序,它在开发环境中运行得非常好。我正在使用网页包。当我运行Thread build并将文件放到服务器上时,一切都正常运行。但是如果我在浏览器上点击刷新,我会得到一个404 我的服务器使用Apache。我试过htaccess,我做过historyFallBackApi。他们似乎都不能解决我的问题 这是我的.htaccessReactjs React生产构建显示404页刷新,reactjs,webpack,react-router,webpack-dev-server,react-router-v4,Reactjs,Webpack,React Router,Webpack Dev Server,React Router V4,我有一个ReactJS应用程序,它在开发环境中运行得非常好。我正在使用网页包。当我运行Thread build并将文件放到服务器上时,一切都正常运行。但是如果我在浏览器上点击刷新,我会得到一个404 我的服务器使用Apache。我试过htaccess,我做过historyFallBackApi。他们似乎都不能解决我的问题 这是我的.htaccess RewriteBase / RewriteCond %{REQUEST_URI} !^/(assets/?|$) RewriteCond %{REQ
RewriteBase /
RewriteCond %{REQUEST_URI} !^/(assets/?|$)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
这是我的webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const modeConfig = env => require(`./config/webpack.${env}`)(env);
const webpackMerge = require('webpack-merge');
const path = require('path');
module.exports = (
{ mode } = { mode: 'development', presets: [] },
) =>
// console.log(`mode: ${mode}`);
webpackMerge(
{
mode,
entry: './src/index.js',
resolve: {
extensions: ['.js', '.jsx', '.css', 'scss'],
},
devServer: {
historyApiFallback: { index: '/' },
contentBase: './',
open: true,
port: 4100,
},
module: {
rules: [
{
test: /\.(png|jpg|jpeg|gif|ico)$/,
exclude: /node_modules/,
loader: 'url-loader?limit=8192',
},
{
test: /\.(js|jsx|mjs)$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.(woff|woff2|eot|ttf)$/,
loader: 'url-loader?limit=100000',
},
{
test: /\.svg$/,
loader: 'svg-inline-loader?classPrefix',
},
],
},
output: {
publicPath: '/',
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
// new FaviconsWebpackPlugin({ logo: "./public/image.png" })
],
},
modeConfig(mode),
);
这是我的路线
function App() {
return (
<Router history={history}>
<Switch>
<Route exact path="/" component={LoginComponent} />
<Route path="/reset-password" component={ResetPassword} />
<Route path="/dashboard" component={Dashboard} />
<Route path="/cards" component={CardsList} />
<Route path="/view-card" component={ViewCard} />
<Route path="/transactions" component={Transfer} />
<Route path="/users" component={UsersList} />
<Route path="/edit-user" component={EditUser} />
</Switch>
</Router>
);
}
export default App;
我在服务器上不断得到404页面刷新。我会将您的
.htaccess
文件更新为这样。问题可能是您当前使用的.htaccess
文件没有将404错误重定向到index.html
:
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ /index.html [L]
我还将添加一个自定义404页面。为此,您需要创建一个新组件并向交换机添加另一条路由。该路由不应该有路径,应该是交换机的最后一条路由
我不知道apache,但在部署的应用程序上使用前端路由获得404的经常性原因是您的服务器未配置为服务SPA(例如,在任何路由上服务html文件和bundle.js)。此代码historyApiFallback:{index:'/')
正在发送入口点包,如果您可以将服务器配置为Gael提到的在每个请求上发送此捆绑包,那么这个问题将得到解决。这是CSR路由的棘手部分。@GaëlS如果我切换到Nginx,它仍然是sameI,需要有人带我通过@tunayberkholl@Temi'Topsy'Bello,你可以查看这篇帖子。我从未尝试过apache,但这正是您所需要的。我会尝试使用回退资源重定向规则。如果这对你不起作用,请按照他们在那篇文章中建议的那样尝试ember.js。我以前没有通过.htaccess
文件设置过。我已经成功地使用了apache。
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ /index.html [L]