[Bug]: BrowserRouter basename Doesn't Match all URL gives 404 on Production

[ademyalcin27]

What version of React Router are you using?

6.3.0

Steps to Reproduce

It's working development mode but It's not working on production;
if I go to with localhost:8080/web it's redirecting to localhost:8080/web/Home which is working
if I go to with localhost:8080/web/Home which is not working
If I refresh when this URL localhost:8080/web/Home which is not working

Im using webpack and my webpack settings

// webpack.prod.config.
import path from 'path';
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const commonConfig = require('./webpack.common');
const { merge } = require('webpack-merge');

const prodConfig = {
    mode: 'production',
    output: {
        filename: '[contenthash].[name].bundle.js',
        chunkFilename: '[contenthash].[name].bundle.js',
        path: path.resolve(__dirname, './web/'),
        clean: true,
        assetModuleFilename: 'web/[hash][ext][query]',
        devtoolModuleFilenameTemplate: 'webpack://[namespace]/[resource-path]?[loaders]'
    },
    module: {
        rules: [
            {
                // Sass
                test: /\.(scss|css)$/,
                use: [

                    { loader: MiniCssExtractPlugin.loader, options: { esModule: false } },
                    { loader: 'css-loader', options: { sourceMap: false } },
                    { loader: 'fast-sass-loader', options: { sourceMap: false } }
                ]
            },
            {
                test: /\.(png|jpe?g|gif)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'images/[hash].[name][ext]'
                }
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './src/app/index.html.ejs',
            watchMode: false,
            chunks: 'all',
            inject: false
        }),
        new MiniCssExtractPlugin({
            filename: '[contenthash].[name].styles.css',
            ignoreOrder: false // Enable to remove warnings about conflicting order
        })
    ],
 
};

module.exports = (env: Record<string, unknown>, args: Record<string, unknown>) => {
    return merge(commonConfig(env, args), prodConfig);
};

// webpack.dev.config
import path from 'path';
const { merge } = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const commonConfig = require('./webpack.common');
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');

const smp = new SpeedMeasurePlugin();
const devConfig = {
    mode: 'development',
    target: 'web',
    output: {
        filename: '[name].bundle.js',
        chunkFilename: '[name].bundle.js',
        path: path.resolve(__dirname, './dist/web'),
        publicPath: '/web/',
        clean: true,
        devtoolModuleFilenameTemplate:'webpack://[namespace]/[resource-path]?[loaders]'
    },
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader', options: { sourceMap: true } },
                    { loader: 'fast-sass-loader', options: { sourceMap: true } }
                ]
            },
            {
                test: /\.(png|jpe?g|gif)$/,
                type: 'asset/resource',
                generator: {
                    publicPath: '/web/',
                    filename: 'images/[name][ext]'
                }
            }
        ]
    },
    devServer: {
        port: 9000,
        allowedHosts: 'all',
        static: {
            directory: path.join(__dirname, './src/app/resources/')
        },
        devMiddleware: {
            index: true // specify to enable root proxying
        },
        proxy: [
            {
                context: ['/'],
                target: 'https://localhost:9000/',
                secure: false,
                changeOrigin: true,
                bypass: function () {
                    return '/web/';
                }
            }
        ],
        compress: true,
        historyApiFallback: false,
        // open: true
        hot: true
    },
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000,
        ignored: /(node_modules|node|dist|\.awcache|index\.html|\.spec\.[tj]sx?)/
    },
    devtool: 'eval-cheap-source-map',
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/app/index.html.ejs',
            watchMode: true,
            chunks: 'all',
            publicPath: '/web/',
            inject: false
        }),
        new MiniCssExtractPlugin({
            filename: '[name].styles.css',
            ignoreOrder: false 
        })
    ]
};

module.exports = (env: Record<string, unknown>, args: Record<string, unknown>) => {
    return smp.wrap(merge(commonConfig(env, args), devConfig));
};

import { BrowserRouter as Router } from 'react-router-dom';

 <Router basename="/web">
      <RouterConfig />
  </Router>

// RouterConfig Component
<Routes>
       <Route path="/Home" element={isAuth ? <DashBoardComponent /> : <LoginComponent />} />
        ....
     <Route path="/" element={<Navigate to="/Home" />} />
      <Route path="*" element={<NotFound />} /> 
</Routes>

Expected Behavior

an existing url should open when the page is refreshed.

Actual Behavior

an existing not is opening when the page is refreshed.