进行反应构建后路由不起作用答案

【问题标题】：Routing doesn't work after doing react build进行反应构建后路由不起作用
【发布时间】：2020-09-29 23:48:40
【问题描述】：

于是我创建了如下图的路由，

import React from "react";
import ReactDOM from "react-dom";
import MainComponent from "./components/mainComponent";
import LoaderComponent from "./components/loaderComponent";
import * as serviceWorker from "./serviceWorker";
import { Route, BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(
  <Router>
    <div>
      <Route exact path="/home" component={MainComponent} />
      <Route exact path="/loader" component={LoaderComponent} />
      <Route exact path="/" component={MainComponent} />
    </div>
  </Router>,
  document.getElementById("root")
);

serviceWorker.unregister();

通过启动应用程序时路由工作得很好

npm 运行开始

当我点击 localhost:3000/home 时，它会呈现 MainComponent。但是在构建之后，它说 Cannot GET /home

npm 运行构建

通过nodeJs检查应用程序（构建后）时，只有默认路由（）有效。其余路由在浏览器中抛出 Cannot GET 错误。

附在nodejs server.js文件下面

const express = require("express");
const bodyParser = require("body-parser");
const path = require("path");
const dotenv = require("dotenv");

dotenv.config();

require("./db/db_connection");
require("./scheduler");

const app = express();

//This is to make sure request body is accessible in express
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

//Router for the api end points
const leaderboardRoutes = require("./routes");
app.use("/api/v1", leaderboardRoutes);

//Views are present inside build folder
app.use(express.static(path.join(__dirname, "build")));

//Application hosted port
const port = process.env.PORT || 3000;

app.listen(port, function () {
  console.log(`Application running on port ${port}`);
});

我还附上了 package.json 文件以供参考，

{
  "name": "test-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.19.2",
    "body-parser": "^1.19.0",
    "bootstrap": "^4.4.1",
    "connect-timeout": "^1.9.0",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "http": "0.0.1-security",
    "material-ui": "^0.20.2",
    "mongoose": "^5.9.9",
    "node-schedule": "^1.3.2",
    "path": "^0.12.7",
    "pure-react-carousel": "^1.25.2",
    "react": "^16.13.0",
    "react-bootstrap": "^1.0.0-beta.17",
    "react-circular-progressbar": "^2.0.3",
    "react-dom": "^16.13.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.0",
    "request": "^2.88.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "start-server": "npm run build && nodemon server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

请帮助我了解哪里出了问题或我错过了什么。提前致谢。

【问题讨论】：

你能不能全局安装npmjs.com/package/http-server，然后将cd 安装到你构建的文件夹中并启动服务器。然后转到浏览器localhost:8080。 React 编译成静态文件。

标签： node.js reactjs react-router react-router-dom

【解决方案1】：

我没有使用过react-scripts，但是在构建之后，如果它显示Cannot GET /*，那么在我看来，这些文件将进入build 目录下的某个目录，这意味着您尝试访问的路径不完整。您可能需要检查并在您的构建配置中使用。

例如，在我的例子中，我为我的应用程序使用了挂载路径，所以它看起来像：

http://localhost:3000/myapp 其中myapp 是挂载路径。

然后我在 webpack 配置 path 中使用了 public 名称作为目录，因为我想把我的文件放在那里，然后我使用了 publicPath 和值 myapp，这意味着文件正在进入build/public/myapp，所以当我点击上面的 URL 时，服务器会在这个路径中查找 index 文件并加载该文件。

【讨论】：