因此我创建了如下所示的路由,
null
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();
null
当应用程序启动时,路由工作得非常好
npm运行启动
当我点击localhost:3000/home时,它呈现MainComponent。 但在建造之后,它说无法到达/回家
npm运行生成
当通过nodeJs检查应用程序(构建后)时,只有默认的routing()起作用。 剩余路由抛出无法在浏览器中获取错误。
附在nodejs server.js文件下面
null
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}`);
});
null
我还附加了package.json文件以供参考,
null
{
"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"
]
}
}
null
请帮助我了解哪里出了问题或者我错过了什么。 提前谢谢你。
我没有使用react-scripts
,但是在构建之后,如果它的显示不能获得/*
,那么在我看来,文件似乎正在进入build
目录下的某个目录,这意味着您试图访问的路径不完整。 您可能希望检查这一点,并在构建配置中使用。
例如,在我的例子中,我为我的应用程序使用了挂载路径,因此它看起来像:
http://localhost:3000/myapp
,其中myapp
是挂载路径。
然后我在webpack configpublic
目录中使用了public
name,因为我想把我的文件放在那里,然后我使用了带有值myapp
的publicpath
,这意味着文件将进入build/public/myapp
,所以当我点击上面的URL时,服务器在此路径中查找index
文件并加载该文件。