在使用webpack开发了react之后，browserRouter不允许我直接去一条路线，但是hashRouter允许吗？

Question

我的问题，当我运行npm运行开发，应用程序加载和一切都是好的，我可以去我的路线定义，并能够看到组件。然而，当我执行npm运行buildDev并加载应用程序时，它会很好地加载"/“路由，但是当我手动转到"/login”时，它会说“无法获得/login”

如果我点击“登录”链接来设置我的“链接”，那么即使在构建之后，也可以工作得很好。然后我进入我的index.js，将我的浏览器路由器改为哈希路由器，然后再次运行buildDev和npm，如果我运行了“/#/登录”，我就可以进入登录路由了。

，我在这里做错了什么，浏览器路由器不工作？

我的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>
    );
  }
}

​

编辑我的服务器-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"))
}

​

然后，在“主”文件夹中，我只有一个"test“文件，该文件具有以下导出的路由：

​

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

  res.send("hello")


);

​

Answer 1

与前面的人一样，您需要在服务器-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文件的链接。