После сборки приложение не запускается с адреса, отличного от корневого

После сборки приложения, если в продакшене открыть сайт в корне, то все будет нормально. При перемещении по сайту все отлично.

Вот как выглядит source:

введите сюда описание изображения

Но если я попытаюсь перейти к URL-адресу, отличному от корневого, например /profile, то react просто сломается:

введите сюда описание изображения

На экране ничего не отображается и source странный.

Я создал приложение, используя create-react-app.

Вот как я отправляю приложение с сервера:

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'));
        }
    );
}

ошибки:

введите сюда описание изображения

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')
);

Вот как это выглядит:

введите сюда описание изображения

Простите за низкое разрешение.


Ответы (1 шт):

Автор решения: Voprositel

Я заменил "homepage": "./" на "homepage": "http://localhost:5500" и все заработало.

→ Ссылка