После сборки приложение не запускается с адреса, отличного от корневого
После сборки приложения, если в продакшене открыть сайт в корне, то все будет нормально. При перемещении по сайту все отлично.
Вот как выглядит 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" и все заработало.



