Webpack5, React, DevServer, Proxy, React Router v6
Пытаюсь заставить работать приложение на react с react router v6. Приложение собирается вебпаком 5, для dev mode используется вебпаковский devServer, БЕ отдельно, поэтому нужен прокси.
Структура папок:
/src/
---index.tsx
---index.html
---разные другие папки, не имеющие тут значения
/webpack/
---webpack.config.js
webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
context: path.resolve(__dirname, '../src'),
entry: {
index: 'index.tsx'
},
output: {
filename: 'bundle.js'
},
mode: 'development',
devServer: {
port: 9001,
proxy: {
'/': {
target: 'http://localhost:5000',
secure: false,
changeOrigin: true
}
},
historyApiFallback: true
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
filename: 'index.html'
})
],
module: {
...
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
modules: [
path.resolve('src/'),
'node_modules'
]
}
};
Маршруты в реакте (хотя их прикреплять к вопросу, кажется, лишнее):
<BrowserRouter>
<Routes>
<Route path="/positions/:id" element={
<React.Suspense fallback={<>...</>}>
<Position />
</React.Suspense>
} />
<Route path="/positions" element={
<React.Suspense fallback={<>...</>}>
<Positions />
</React.Suspense>
} />
<Route path="/" element={
<React.Suspense fallback={<>...</>}>
<Positions />
</React.Suspense>
} />
</Routes>
</BrowserRouter>
Проблема: Когда я захожу на главную страницу (localhost:9001), реакт отрабатывает, компоненты рендерятся. На главной странице есть ссылки (через ) на дочерние страницы (positions, positions/:id) и, если я перейду через нажатие на ссылку, то тоже всё отрендерится.
Но, если я останусь на странице positions/:id и обновлю страницу или перейду на неё (на страницу) по прямой ссылке, то я увижу 404. Т.е. запрос не будет послан на мой index.html, где есть react, вместе с react-router. По какой-то причине historyApiFallback не отрабатывает.
Варианты пробовал разные, включая:
historyApiFallback: { index: 'index.html' } или historyApiFallback: { rewrites: [{from: ..., to: ... }] }.
Мне кажется, идти в сторону rewrites в корне неправильно и так быть не должно. Не буду же я каждый рут прописывать в вебпаке.