Webpack uses wrong path to import bundle - reactjs

Question

so I'm having a problem with webpack codesplitting. It creates bundles correctly but then everything is getting messed up when it sends xhr request for the bundle. Only the index route works correctly 'cause it's just a / but it actually uses client side route as path to bundle. So using the example below it goes with the path localhost:3000/dir/something/0.bundle.js instead of localhost:3000/0.bundle.js. I'm new to webpack, is there a way to make it use the / route every time?
pseudo markup
<Link to="/dir/something/else"/>
<!-- <App/> -->
<BrowserRouter>
<Switch>
<Route path="/dir/:param1/:param2">
<Bar/>
</Route>
<Route path="/">
<Foo/>
</Route>
</Switch>
</BrowserRouter>
I'm using #loadable/component so each component is imported with a loadable(()=>import('path/to/component'))
webpack.config.js
{
mode,
entry: './src/index.tsx',
target: 'web',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.bundle.js'
},
module: {
rules: [
{
test: /\.ts(x)?$/,
use: 'ts-loader',
exclude: /node_modules/,
include: path.join(__dirname, '/src'),
},
{
test: /\.svg$/,
use: {
loader: 'url-loader',
options: {
limit: 5000
}
}
}
],
},
devServer: {
hot: true
},
plugins: [new HTMLWebpackPlugin({
template: 'src/index.html'
})],
resolve: {
modules: ['node_modules'],
extensions: ['.ts', '.tsx', '.js', '.json']
}
}