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 в корне неправильно и так быть не должно. Не буду же я каждый рут прописывать в вебпаке.


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