I am building a React / Redux application with React Router v4. It has a simple architecture.
-Gallery path /h/portfolio
-Links path /h/links
-About path /h/about
Now, every time I update, if I am at the second level / h / portfolio or / h / links or / h / about, this error is net :: ERR_ABORTED.

The update works fine if I'm at the root level or / h / level. And I added historyApiFallback: true
to devServer, so this is not a problem. This bit is unproductive to switch to / root each time I update. 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>
source
share