Django conflict with React routing?

Question

Django

I did rerouting, but api is not taken because of it (it is sent to the main page)
The same with loading images

of the urls of the main application

urlpatterns = [
    path('admin/', admin.site.urls),
    path("api/<categoryId>/<page>/<amount>/", views.ProductListView.as_view(), name="api_post_list"),
    path('', include('frontend.urls')),
    path("items/api/id/<uid>/", views.SingleProductView.as_view(), name = "single_product_view")
]
urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)

frontend app urls

urlpatterns = [
    path('', views.index ),
    re_path(r'^(?:.*)/?$', views.index ),   
]

settings.py

STATIC_URL = '/static/'
MEDIA_URL = "/images/"
MEDIA_ROOT = os.path.join(BASE_DIR, "frontend/static/frontend/images/")

webpack config app structure

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
const isDev = process.env.NODE_ENV === 'development'
const isProd = !isDev

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, './static/frontend')
  },
  performance: {
    hints: false
  },
  devtool: isDev ? 'source-map' : '',
  plugins: [
    new HtmlWebpackPlugin({
      minify: {
        collapseWhitespace: isProd
      }
    }),
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, './src/favicon.ico'),
          to:  path.resolve(__dirname, './static/frontend')
        }
      ],
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [{loader: 'babel-loader'}, isDev ? 'eslint-loader' : '']
      },
      {
        test: /\.(jpg|png|svg)$/,
        loader: 'file-loader',
        options: {
          name: 'images/[name].[ext]'
        },
      },
      {
        test: /\.sass$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hrm: isDev,
              reloadAll: true
            },
          },
          'css-loader', 'sass-loader'
        ]
      },
      {
        test: /\.(ttf|woff|woff2|eot)$/,
        use: ['file-loader']
      }
    ]
  }
};

Answer 1

You've already been asked to separate front and django, but you're trying hard to solve a problem that shouldn't be created at all.