Why is there an error when following a direct link in React?

Question

React

There is a construction in React -

<BrowserRouter>
            <div className="app">
                <Switch>
                    <Route exact path="/">
        <Home />
                    </Route>
                    <Route path="/about">
        <About />
                    </Route>
                    <Route path="/contacts">
        <Contacts />
                    </Route>
                    <Route
                        path="/blog/:id"
                        render={(props) => {
                            return <CurrentArticle {...props} />;
                        }}
                    />
        <Route path="/blogs">
        <Blog />
                    </Route>
       <Route>
        <NotFound />
                    </Route>
                </Switch>
            </div>
        </BrowserRouter>

Locally page transitions work, 404 is displayed ok. Direct links like " localhost:3000/contacts " also work.

But in battle it gives 404 Not Found from nginx at mysite.ru/contacts. Although if you go to the page from the menu, from the main one, then it is displayed.
And why then does the custom 404 page not work in this case?
Maybe the problem is in the server config?
Now so

server {
    server_name mysite.ru;

    root /var/www/mysite/build;
    index index.html;

    location / {
        try_files $uri $uri/ $uri.html =404;
    }
}

Answer 1

https://stackoverflow.com/questions/49203698/nginx...