使用 webpack 构建 react 应用程序后，browserRouter 不允许我直接进入路由，但 hashRouter 可以吗？

Question

我的问题 当我运行 npm run dev 时，应用程序加载并且一切都很好，我可以转到定义为的路线并能够看到该组件。但是，当我执行 npm run buildDev 并加载应用程序时，它会很好地加载“/”路由，但是当我手动转到“/login”时，它会显示“无法获取 /login”

什么有效 如果我在设置我的“链接”时单击“登录”链接，它工作正常，即使在构建之后也是如此。然后我进入我的 index.js 并将我的 browserrouter 更改为 hashrouter，然后再次运行 buildDev 并 npm start，如果我执行“/#/login”，我就能够进入登录路由

浏览器路由器不起作用，我做错了什么？

我的 package.json 脚本文件如下：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "client": "webpack-dev-server --mode development",
  "server": "nodemon server-dev.js",
  "dev": "concurrently \"npm run server\" \"npm run client\"",
  "buildDev": "rimraf build && webpack --mode development --config webpack.server.config.js && webpack --mode development --config webpack.dev.config.js",
  "buildProd": "rimraf build && webpack --mode production --config webpack.server.config.js && webpack --mode production --config webpack.prod.config.js",
  "start": "node ./build/server.bundle.js"
},

我的 webpack.dev.config.js 文件内容如下：

module.exports = {
  devtool: "cheap-module-source-map",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "[name].bundle.js",
    chunkFilename: "[name].bundle.js",
    publicPath: "/"
  },
  mode: "development",
  target: "web",
  resolve: {
    extensions: [".js", ".jsx"]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          { loader: "style-loader" },
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: true,
              camelCase: "dashes",
              localIdentName: "[name]_[local]_[hash:base64:5]"
            }
          },
          {
            loader: "postcss-loader",
            options: {
              ident: "postcss",
              plugins: () => [
                autoprefixer({
                  browsers: [">1%", "last 2 versions"]
                })
              ]
            }
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        loader: "url-loader?limit=8000&name=images/[name].[ext]"
      }
    ]
  },
  devServer: {
    port: 3000,
    open: true,
    proxy: {
      "/main": {
        target:"http://localhost:8080"
      }
    },
    historyApiFallback: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + "/src/index.html",
      filename: "index.html",
      inject: "body",
      excludeChunks: ["server"]
    })
  ],
  optimization: {
    minimizer: [new UglifyJsPlugin()]
  }
};

我的 app.js 如下所示：

const AsyncPizza = React.lazy(() => import("./containers/Pizza"));

class App extends Component {
  render() {
    return (
      <div>
  <Link to="/login">login</Link>     
        <div>
          <Suspense fallback={<div>loading...</div>}>
            <Route path="/login" component={Authentication} />
            <Route path="/" exact component={LandingPage} />
            <Route path="/pizza" exact component={AsyncPizza} />
          </Suspense>
        </div>
      </div>
    );
  }
}

编辑 我的 server-dev.js 如下：

app.use(express.static("build"));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
require("./routes")(app);


app.listen(8080, () => console.log("Listening on port 8080!"));

我的 webpack.server.config.js 如下：

module.exports = (env, argv) => {
  const SERVER_PATH =
    argv.mode === "production" ? "./server-prod.js" : "./server-dev.js";

  return {
    entry: {
      server: SERVER_PATH
    },
    output: {
      path: path.join(__dirname, "build"),
      filename: "[name].bundle.js",
      chunkFilename: "[name].bundle.js",
      publicPath: "/"
    },
    mode: argv.mode,
    target: "node",
    node: {
      // Need this when working with express, otherwise the build fails
      __dirname: false, // if you don't put this is, __dirname
      __filename: false // and __filename return blank or /
    },
    externals: [nodeExternals()], // Need this to avoid error when working with Express
    module: {
      rules: [
        {
          // Transpiles ES6-8 into ES5
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader"
          }
        }
      ]
    }
  };
};

编辑 2：

在我的路由文件夹中，我有一个 index.js 文件，其中包含以下内容：

module.exports=function(app){
    app.use("/main",require("./main"))
}

然后在“主”文件夹中，我只有一个“测试”文件，该文件具有以下导出路径：

router.get(
  "/test",
  (req, res) =>

  res.send("hello")


);

Answer 1

根据前人的说法，您需要在 server-dev.js 中的 app.use 路由部分之后添加此内容

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname + '/index.html'));
})

这应该可以解决它

Answer 2

您可以尝试使用此代码示例（如果您使用服务器仅服务于 react 应用程序）：

app.get('*', (req,res) =>{
    res.sendFile(path.join(__dirname+'/client/build/index.html'));
});

您可以在哪里根据您的文件结构替换 index.html 文件的链接。