Аfter assembly, the application does not start from a url different from the root

[kertAW]

After building the application, if you open the site in the root in production, then everything will be fine. As you navigate the site, everything works great.

This is what source looks like:

But if I try to go to a url different from the root, for example, /profile, then react just breaks:

Nothing is displayed on the screen and the source is strange.

I created the application using the create-react-app.

This is how I send the application from the server:

if (process.env.NODE_ENV === 'production') {
    app.use('/', express.static(path.join(__dirname, 'client', "build")));

    app.get('*',
        async(req, res) => {
            res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
        }
    );
}

errors:

(just in case)

App.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';

// Pages
import Main from './Pages/Main/Main';
import Auth from './Pages/Auth/Auth';
import Profile from './Pages/Profile/Profile';
import Blog from './Pages/Blog/Blog';
import CreateBlog from './Pages/CreateBlog/CreateBlog';
import PostPage from './Pages/PostPage/PostPage';
import BlogsAndUsers from './Pages/BlogsAndUsers/BlogsAndUsers';

// Components
import Header from './Components/Header/Header';

function App() {
    return (
        <Router>
            <div className="notification-bar"></div>
            <Header />
            <Switch>
                <Route path='/' exact>
                    <Main />
                </Route>
                <Route path='/auth' exact>
                    <Auth />
                </Route>
                <Route path='/blog/:id' exact>
                    <Blog />
                </Route>
                <Route path='/blogs' exact>
                    <BlogsAndUsers type="blogs" />
                </Route>
                <Route path='/profiles' exact>
                    <BlogsAndUsers type="profiles" />
                </Route>
                <Route path='/create_blog' exact>
                    <CreateBlog />
                </Route>
                <Route path="/profile/:id" exact>
                    <Profile />
                </Route>
                <Route path="/article/:id" exact>
                    <PostPage />
                </Route>
                <Redirect to='/' />
            </Switch>
        </Router>
    );
}

export default App;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import './fonts/fonts-import.css'

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

this is how it looks:

sorry for the low resolution.

How can this problem be solved?

[stofolus]

Hi!

Your problem is propaby related to client-side routing not working correctly. You need to tell your webserver to always deliver index.html when loading different urls. You can read about it here https://create-react-app.dev/docs/deployment#serving-apps-with-client-side-routing