我正在创建一个由多个独立子页面组成的React应用。我目前有一个独立的“登陆页面”，“菜单页面”和一个“菜单页面”（在某些时候后两者可能会合而为一）。我正在使用webpack将页面和webpack开发服务器捆绑在一起以进行本地开发。菜单页面正在使用react-router来浏览。这是我的webpack设置，用于更好地理解：
{
entry: {
menus: path.resolve(__dirname, "src", "client", "menus.jsx"),
landing: path.resolve(__dirname, "src", "client", "landing.jsx"),
menu: path.resolve(__dirname, "src", "client", "menu.jsx"),
},
output: {
path: path.join(__dirname, outputDirectory),
filename: "[name].bundle.js",
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-react", "@babel/preset-env"],
},
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|jpg|woff|woff2|eot|ttf|svg)$/,
loader: "url-loader?limit=100000",
},
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"],
},
],
},
resolve: {
extensions: ["*", ".js", ".jsx"],
},
devServer: {
port: 3000,
open: true,
historyApiFallback: {
verbose: true,
index: "/landing.html",
rewrites: [
{ from: /^\/menus/, to: "/menus.html" },
{ from: /^\/menu/, to: "/menu.html" },
{ from: /^\/menu\//, to: "/menu.html" },
],
},
proxy: {
"/api": "http://localhost:8080",
},
},
plugins: [
new CleanWebpackPlugin([outputDirectory]),
new HtmlWebpackPlugin({
template: "./src/client/index.html",
chunks: ["menus"],
filename: "menus.html",
}),
new HtmlWebpackPlugin({
template: "./src/client/index.html",
chunks: ["landing"],
filename: "landing.html",
}),
new HtmlWebpackPlugin({
template: "./src/client/index.html",
chunks: ["menu"],
filename: "menu.html",
}),
],
}
我的问题是，当我导航到/menu/orders时，historyApiFallback显示了以下日志：
Rewriting GET /menu/preview to /menu.html
Rewriting GET /menu/menu.bundle.js to /menu.html
第一次重写是我所期望的，但是第二次重写使我感到困惑。首先，为什么要尝试获得/menu/menu.bundle.js？其次，如果我有“”，为什么还要重写路线。在路线上？最后，我如何才能使它工作，以便/menu/preview与/menu完全相同？
这是我的./src/client/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Locameal</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
</head>
<body>
<div id="app"></div>
</body>
</html>
和./src/client/menu.jsx
import React from "react";
import { render } from "react-dom";
import Menu from "./views/Menu";
import { BrowserRouter } from "react-router-dom";
render(
<BrowserRouter>
<Menu />
</BrowserRouter>,
document.getElementById("app")
);
您可以提供一个正则表达式，以便将所有带有menu/*的路由都重定向到menu.html，以便当您位于/menu/时，它不会尝试从/menu/preview解析分发包>
{ from: /^\/menu\/.*$/, to: "/menu.html" }查看
connect-history-api-fallback的文档以获取更多详细信息
您可能想尝试添加