How to properly organize the distribution of statics on express.js, taking into account react-router?

Question

Express.js

I'm trying to write web applications using react and express. Came across some oddities.

This is how I distribute static.

app.use(express.static(__dirname + './../public' ));
app.use(express.static(__dirname + './../public/js' ));
app.use(express.static(__dirname + './../public/css'));

To make it work with react-router I do this

app.use('*', (req, res) => {
  res.sendFile("index.html", { root: __dirname + "/../public/"});
})

The first problem is that different browsers somehow "perceive" file paths differently. For example, chrome sees files included in index.html.

Firefox also works,
but Yandex does not have a browser.



The second problem is that when distributing files, for some reason, the path from the address bar is taken into account. Sorry, maybe I'm wording it wrong, below are screenshots for clarity. If you do not reload
the page, then the routing seems to work normally, except for the error, the nature of which is not entirely clear to me :



From this follows the question, how to properly configure the distribution of statics in express? Prescribe each path when I distribute statics? Looks so so. But I can't even do that until I solve the first problem.

Answer 1

The problem was with the name of the paths in index.html
after I renamed the folders from css and js to javascript and stylesheet everything worked.