我目前正在开发一个包含路由的 React + Express Web 应用程序。当我转到不是我的主页的路由并刷新页面时，我收到 404 错误。有许多帖子可以解决这个问题，就像这里描述的那样：https://tylermcginnis.com/react-router-cannot-get-url-refresh/我试图实现。以下是我对这个问题的理解：
- 转到加载 dist/index.html 和dist/bundle.js http://locahost:3000(定义了所有必要的React路由(
- 转到 http://localhost:3000/about，这是一个预定义的路线，大约.html
- 刷新页面 - 您看到 404 错误，表示 index.html 未在 http://localhost:3000/about 处定义。我知道这种情况正在发生，因为在 http://localhost:3000/about，Web 应用程序尝试获取索引.html但在
dist/index.html文件夹中找不到它。我相信这种情况正在发生，因为我的dist/index.html在我的 webpack 配置中提供在内存中，并且没有创建"真正的"dist/index.html文件。
这是我的 webpack 配置文件：
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: path.join(__dirname, './src/index.js'),
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
// which files should babel be used on
test: /.(js|jsx)$/,
exclude: /node_modules/,
loader: ['babel-loader'],
},
{
test: /.css$/,
use: [
'style-loader', 'css-loader'
]
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
// copy the index.html file to the dist folder so that devServer can serve the static index.html file from dist folder
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new CleanWebpackPlugin()
],
// dist used to serve our application in browser
devServer: {
contentBase: path.join(__dirname, 'dist'),
port: 3000,
compress: true,
hot: true,
proxy: {
'/**': {
target: 'http://localhost:5000',
secure: false
}
}
}
};
还有我的索引.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>App</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
当webpack-dev-server与HtmlWebpackPlugin结合使用时，从我在线阅读的内容来看，它会获取我指定的模板索引.html文件并将其加载到内存中的dist文件夹中。它实际上不会出现在那里 - 而是如果你转到http://localhost:3000/webpack-dev-server你会看到index.html文件。它也对我的bundle.js文件执行相同的操作，该文件包含我的index.html文件引用的所有JS代码，我想这一切都在内存中完成，因为将真正的索引.html文件加载到dist文件夹中有什么意义，除非您要去生产需要静态提供文件的地方。
如果我理解正确，我是否应该在我的 dist 文件夹中放置一个引用我的捆绑.js文件的索引.html文件？它将与我上面的内容相同，除了使用<script>标签来引用bundle.js.对我来说，在我的src文件夹中有一个index.html文件以及在我的dist文件夹中有一个仅用于"重新加载"的文件似乎违反直觉。此外，为什么要使用HtmlWebpackPlugin呢？那么在内存中加载 index.html/bundle/js 有什么意义呢？
安装 HtmlWebpackPlugin(html-webpack-plugin( 并添加索引.html解决我同样的问题
这是 webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: "[name].[hash:8].bound.js",
publicPath: '/',
},
devServer: {
contentBase: './dist',
hot: true,
},
plugins: [
new HtmlWebpackPlugin({
title: 'gsap-learning',
template: path.resolve(__dirname, './src/index.html'),
})
],
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
},
module: {
rules: [
{
test: /.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /.less$/,
loader: 'less-loader'
},
{
test: /.m?(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
}
]
},
};
应用.js
function App() {
return (
<Router>
<Header />
<Switch>
<Route exact path="/" component={Home} />
{/*<Route path="/lesson/:id">*/}
{/* <Lessons />*/}
{/*</Route>*/}
</Switch>
</Router>
);
}
索引.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
索引.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, initial-scale=1">
<title>Gsap-learning</title>
</head>
<body>
<div id="root"></div>
</body>
</html>