Nested React routes won't show after refresh

Question

I have no issue navigating to the main routes and their nested routes but issue arises within the nested routes example /register, when I try to refresh the page, the page comes up blank with no error on the console. The main routes refresh just fine. I'm currently using endpoints in express to serve the html file for the nested routes so I can keep building the nested routes, but I need a lasting solution to this issue. I'm guessing its an issue with my routing or I've probably done something wrong in the backend. Please help

app.js

import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
import {PublicPage} from './public.jsx'
import {Root} from './root.jsx'
import {Register} from './register.jsx'


let contentNode= document.getElementById('container')

function RoutedApp(){
    return(
            <Router>
                <Routes>
                    <Route path={'/*'} element={<PublicPage/>}>
                        <Route index element={<Root/>}/>
                        <Route path='register' element={<Register/>}/>
                    </Route>
                </Routes>
            </Router>
        )
}

ReactDom.render(<RoutedApp/>, contentNode)

webpack

module.exports = {
    mode: 'development',
    entry: {
        app: './src/app.jsx'
    },
    output: {
        path: path.resolve(__dirname, './static/js'),
        filename: '[name].js',
        chunkFilename: '[name].js'
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                default: false,
                vendor: false,
                vendor: {
                    name: 'vendor',
                    chunks: 'all',
                    test: /node.modules/
                }
            }
        }
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                include: path.resolve(__dirname, 'src'),
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-react', '@babel/preset-env']
                    }
                }

            }
        ]
    }
}

I've tried adding a "homepage":"/" in package.json <base href="/"> in index.html, adding the basename prop to <Router>

I'm building with webpack without the proxy, incase this info is somehow relevant, I'm also serving the file with node/express server

For those interested in the work-around I mentioned earlier, i simply created multiple endpoints for each of react nested routes on the express server, example for the nested /register route,

server.js

app.get('/register', (req,res)=>{
    //send html file
    // res.sendFile(path.resolve(__dirname, '...'))
})
app.get('/api/register', (req,res)=>{
    //send a json data
})
app.post('/api/register', (req,res)=>{
    //receive and process client's input
})

Answer 1

I fixed the issue by adding the leading slash to the script file imported in index.html.

So, I needed to change this <script src="index.js"></script> to this <script src="/index.js"></script>

I changed my webpack.config.js

const config = {
  entry: './src/app/index.tsx',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/', // 👈 added this property
  },
  // other configs
};