Question

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

有效的方法 如果我在设置“链接”时单击“登录”链接，即使在构建后也可以正常工作。然后我进入index.js，将我的browserrouter更改为hashrouter，然后再次运行buildDev并启动npm，如果我执行了“ /＃/ 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

按照先前的经验，您需要在应用程序之后添加此代码。use将路由部分添加到server-dev.js中

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文件的链接。

使用webpack构建React应用后，browserRouter不允许我直接转到路由，但hashRouter允许吗？

2 个答案: