我遇到了一个问题,我将用户重定向到其相应的配置文件页面,其中显示了个人资料信息。让我们以http://localhost:8080/user/1
为例。当我使用Navbar中的链接重定向用户时,页面已成功渲染,但是当我在同一URL中刷新页面(即http://localhost:8080/user/1
)时,我会遇到一个错误,说找不到ERROR http://localhost:8080/user/bundle.js
。我是React Router V4的新手,请为此提供帮助。预先感谢。
我的webpack.config.js是
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
var path = require("path");
var config = {
entry: ["./src/index.tsx", 'webpack-dev-server/client?http://localhost:8080'],
plugins: [
new HtmlWebpackPlugin({
template: 'index.ejs',
filename: 'index.html'
}),
],
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js"
},
resolve: {
extensions: [".ts", ".tsx", ".js"]
},
devtool: 'source-map',
module: {
rules: [
{ test: /.tsx?$/, use: 'tslint-loader', enforce: 'pre' },
{ test: /.tsx?$/, use: ['babel-loader', 'awesome-typescript-loader'] },
{ test: /.(css|scss)$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /.(png|woff(2)?|eot|ttf|svg)(?[a-z0-9=.]+)?$/, use: 'url-loader?limit=1024&name=fonts/[name].[ext]' },
{ test: /.(jpg|jpeg|gif|png)$/, use: 'url-loader?limit=10&mimetype=image/(jpg|jpeg|gif|png)&name=images/[name].[ext]' }
]
},
devServer: {
contentBase: path.join(__dirname, 'build'),
hot: true,
inline: true,
historyApiFallback: true
}
};
module.exports = config;
看起来您需要一个公共(又称静态)文件夹!这样,您的文件将始终从相对位置可用。
如果不是作弊,这是另一个stackoverflow的答案:
webpack.config.js
output: {
// your stuff
publicPath: '/assets/'
}
它是客户端和服务器端代码的概念。如果您在旅途中间刷新您的页面,则URL将击中服务器,它将尝试在服务器端找出该方法,因为它在客户端端。 有关更多解释 -
React-Router URL在刷新或手动写入时不起作用