React App returns error after refresh

Question

I'm creating a React/Redux app with React Router v4. It has a simple architecture

--RootPage    path /
 --HomePage   path /h
   -Gallery   path /h/portfolio
   -Links     path /h/links
   -About     path /h/about

Now, every time I refresh, if I'm on second level /h/portfolio, or /h/links, or /h/about, this error net::ERR_ABORTED.

The refresh works fine if I'm on root level or /h/ level. And I've added historyApiFallback: true to devServer so it's not that issue. It's bit unproductive to have to always go to / root everytime I refresh. What could be wrong here?

Here are my routes

const mainRouter=(
    <Wrapper>
<Provider store={store} history={history}>
  <BrowserRouter>
      <div>
      <Route exact path="/" component={Home}/>
      <Route path="/h" component={HomePage}/>
       </div>
   </BrowserRouter>
    </Provider>
    </Wrapper>
  )

And in HomePage

       <main>
          <Route path={`${this.props.match.path}/portfolio`}
          render={ ()=><Gallery {...this.props}/> } />
          <Route path={`${this.props.match.path}/about`} render={ ()=><About 
          {...this.props}/> }/>
          <Route path={`${this.props.match.path}/links`} render={ ()=><Links 
          {...this.props}/> }/>

      </main>

Answer 1

After reproducing the same problem on express server instead of devserver, I got the same error and doing some research, I found this simple fix to this problem

All I had to do was change the <script src="js/app.bundle.js"></script> to <script src="/js/app.bundle.js"></script>

Edit: If you use Webpack-html-plugin which I do, it still gives same error, I had to resolve it by adding output.path.publicPath:"/" in webpack config file