React router with basename and webpack initial url - reactjs

Question

Hello i am stuck with this one and couldnt figure it out. So i have React router v6 with basename - "/ui/" , and i want that when i open localhost:8080 that it automatically turns into "localhost:8080/ui/" because the real view is actually rendered in /ui/ route.
Router setup:
<BrowserRouter basename="/ui/">
...routes here
</BrowserRouter>
Webpack dev:
module.exports = {
mode: 'development',
devtool: 'cheap-module-source-map',
devServer: {
hot: true,
historyApiFallback: true,
open: true,
port: 6969
}
}
And common webpack:
module.exports = {
entry: path.resolve(__dirname, '..', './src/index.tsx'),
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
module: {
rules: [
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
},
],
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader"
]
},
{
test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
type: 'asset/resource',
},
{
test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
type: 'asset/inline',
},
],
},
output: {
path: path.resolve(__dirname, '..', './build'),
filename: 'bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '..', './src/public/ui/index.html'),
}),
],
stats: 'errors-only',
}
I have tried to add to output publicPath: '/ui/' but it didnt work.
Or even something like this:
static: [
{
publicPath: '/',
directory: path.join(__dirname, "../public/ui/"),
}]
How i can achieve this withouth "redirecting" :\

Answer 1

Try this solution
<Route exact path="/">
<Redirect to="/home" />
</Route>

Answer 2

Check your main.js or similar in your src or sources.
Mine had:
const Root = () => (
<Provider store={store}>
<Router history={history}>
<Route path="/" component={App}>
{appRoute}
</Route>
</Router>
</Provider>
);
and so just had to move it to Route path="/ui/" component={App}