Edit:
The best way to do it is using the public URL where it will be deployed as the basename prop in the Router component. It could also be something like PUBLIC_URL=myproject, and it would make the build assuming the app is served at https://<domain-name>/myproject/index.html.
<Router basename={process.env.PUBLIC_URL}>
...
</Router>
Old answer:
First of all, this is not an issue with React Router. Notice that in your package.json, you have:
"homepage": "./",
"private": true,
The short answer is, if you change the value of "homepage" and make it "", or the URL of the homepage of the site where it is actually deployed, it will work directly.
"homepage": "",
OR
"homepage": "mysite.com/",
Here's why I think that works, in detail:
If you now use react-scripts build, it creates a file - build/index.html which imports JS files like <script src="./static/js/main.9ea6b007.chunk.js">.
Now, when you're using react-router, you ideally want to route all requests to build/index.html. So you may build a proxy server to serve your index.html and static files as follows (using Express.js):
const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, 'build')));
app.use('/', (req, res) => {
res.sendFile(path.join(__dirname, 'build/index.html'));
});
app.listen(process.env.PORT || 3000, () => console.log(`Running on PORT ${process.env.PORT || 3000}`));
Now you see that all your requests - except the ones for static files - return the index.html file. So, all your JS and CSS files will be returned when you request /static/js/main.9ea6b007.chunk.js. Notice how that's different from what is in your index.html source? The src in the index.html tries to request from ./static/..., and the . is interpreted as the current route.
So let's say you were to visit localhost:3000/abcd expecting your desired page to show up. Let's examine what happens here.
- You get the
index.html as you expected.
- The
index.html tries to request ./static/..., which translates to localhost:3000/abcd/static/..., whereas you wanted it to be localhost:3000/static/.... And anything that is not /static is going to return the same index.html, so even the JS files return the same page resulting in a console error Uncaught SyntaxError: Unexpected token '<'.
- If you go to your browser Devtools and check out the sources, all your JS and CSS files would have the same content as
index.html.
Therefore, the homepage in your package.json is used in the index.html as a prefix to all static files, in the form <homepage>/static/.... Hence it needs to be "" so that the requests are to /static/... or "mysite.com/", so that the requests are to mysite.com/static/....
push? – Upperclassmanpushmethod. Because blank page is displayed on app loading. It should ideally open the page inAppcomponent. Instead, its being routed to my custom404page. – Babb