构建后，应用程序不会从根以外的地址启动

构建应用程序后，如果您在生产环境中以根目录打开站点，那么一切都会好起来的。在站点周围移动时，一切都很好。

这是源的样子：

但是，如果我尝试导航到根目录以外的 URL，例如/profile，那么反应就会中断：

屏幕上什么也没有显示，而且来源很奇怪。

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

错误：

应用程序.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')
);

这是它的样子：

抱歉分辨率低。