Routing doesn't work after doing react build - node.js

Question

So I created a routing as shown below,
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();
The routing works absolutely fine when the app is started through
npm run start
When I hit localhost:3000/home it renders the MainComponent.
But after the build, it says Cannot GET /home
npm run build
When checking the app(after build) through nodeJs, only the default routing () works. Remaining routes throw Cannot GET error in the browser.
Attached below the nodejs server.js file
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}`);
});
I'm also attaching the package.json file for reference,
{
"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"
]
}
}
Please help me in understanding what' going wrong or what I've missed.
Thanks in advance.

Answer 1

I have not used react-scripts but after build, if its showing Cannot GET /*, then it seems to me that the files are going into some directory under the build directory, meaning the path you're trying to access is not complete. You might want to check that and use in your build configuration.
For example, in my case, I used a mount path for my application, so it looked like:
http://localhost:3000/myapp where myapp was the mount path.
Then I had used public name for a directory in webpack config path for I wanted to put my files in there, and then I had used publicPath with value myapp, which means files were going into build/public/myapp, so when I hit the URL above, the server looked for index file in this path and loaded the file.