React App returns error after refresh

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>